반응형
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
반응형
'IT' 카테고리의 다른 글
유형 스크립트 - React 구성 요소의 "이름 찾을 수 없음" 오류 (0) | 2023.03.29 |
---|---|
inline 조건부(angular.display)를 지정합니다. (0) | 2023.03.29 |
jQuery ajax()는 성공, 오류 및 완료 vs.done(), .fail() 및 always()를 사용합니다. (0) | 2023.03.29 |
console.log 각도 지시 범위 출력 [개체] 속성 없음] (0) | 2023.03.19 |
오류: Content-Type이 Access-Control-Allow-Headers에서 허용되지 않습니다. (0) | 2023.03.19 |