IT

TypeScript for...인덱스/키 포함?

itgroup 2023. 3. 29. 21:23
반응형

TypeScript for...인덱스/키 포함?

여기서 설명한 바와 같이 TypeScript는 foreach 루프를 도입합니다.

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item); // 9,2,5
}

근데 인덱스/키 없어요?나는 다음과 같은 것을 기대하고 있다.

for (var item, key of someArray) { ... }

.forEach 님은 이미 다음 기능을 가지고 있습니다.

const someArray = [9, 2, 5];
someArray.forEach((value, index) => {
    console.log(index); // 0, 1, 2
    console.log(value); // 9, 2, 5
});

하지만 만약 당신이 그 능력을 원한다면for...of그러면 배열을 인덱스와 값에 맞출 수 있습니다.

for (const { index, value } of someArray.map((value, index) => ({ index, value }))) {
    console.log(index); // 0, 1, 2
    console.log(value); // 9, 2, 5
}

이 기능은 조금 길기 때문에 재사용할 수 있습니다.

function toEntries<T>(a: T[]) {
    return a.map((value, index) => [index, value] as const);
}

for (const [index, value] of toEntries(someArray)) {
    // ..etc..
}

반복 가능한 버전

이 기능은 ES3 또는 ES5를 대상으로 할 때 사용할 수 있습니다.--downlevelIteration컴파일러 옵션.

function* toEntries<T>(values: T[] | IterableIterator<T>) {
    let index = 0;
    for (const value of values) {
        yield [index, value] as const;
        index++;
    }
}

Array.protype.entries() - ES6+

ES6+ 환경을 타겟으로 할 수 있다면 Arnavion의 답변에 설명된 방법을 사용할 수 있습니다.

참조: Array.protype.entries()

for (const [key, item] of someArray.entries()) { ... }

TS에서는 ES2015를 타겟팅해야 하는데, 는 ES5 런타임에는 지원되지 않는 반복을 지원하기 위한 런타임이기 때문입니다.물론 Babel과 같은 것을 사용하여 ES5 런타임에 출력을 실행할 수 있습니다.

구식 javascript(기능 프로그래밍에 익숙하지 않은 사용자용)

for (let i = 0; i < someArray.length ; i++) {
  let item = someArray[i];
}

는 다음에 사용할 수 있습니다.수집을 처리할 때 인덱스에 액세스하려면 TypeScript 연산자를 사용합니다.

var test = [7,8,9];
for (var i in test) {
   console.log(i + ': ' + test[i]);
} 

출력:

 0: 7
 1: 8
 2: 9

데모 참조

또 다른 구식 솔루션:

var someArray = [9, 2, 5];
let i = 0;
for (var item of someArray) {
    console.log(item); // 9,2,5
    i++;
}

언급URL : https://stackoverflow.com/questions/36108110/typescript-for-of-with-index-key

반응형