프로그래밍 언어/HTML,CSS,JS

JavaScript에서 for… of 구문을 사용하여 loop counter/index 가져 오기

Rateye 2021. 12. 1. 09:46
728x90
반응형
질문 : JavaScript에서 for… of 구문을 사용하여 루프 카운터 / 인덱스 가져 오기

주의

for…of 루프에 여전히 적용됩니다 for…in 을 사용하여 Array 를 반복하지 말고 객체 의 속성 을 반복하는 데 사용하십시오. 즉,이

JavaScript의 기본 for…in 구문은 다음과 같습니다.

for (var obj in myArray) {
    // ...
}

하지만 루프 카운터 / 인덱스 는 어떻게 얻습니까?

제가 할 수 있는 일은 다음과 같습니다:

var i = 0;
for (var obj in myArray) {
    alert(i)
    i++
}

또는 심지어 좋은 오래된:

for (var i = 0; i < myArray.length; i++) {
    var obj = myArray[i]
    alert(i)
}

그러나 차라리 더 간단한 for-in 루프를 사용하고 싶습니다. 나는 그들이 더 좋아 보이고 더 의미가 있다고 생각합니다.

더 간단하거나 우아한 방법이 있습니까?


파이썬에서는 간단하다.

for i, obj in enumerate(myArray):
    print i
답변

for…in 은 값이 아닌 속성 이름 을 반복하며 지정되지 않은 순서로 수행합니다 (예, ES6 이후에도). 배열을 반복하는 데 사용해서는 안됩니다. 그들에게는 값과 인덱스를 모두 제공하는 함수에 전달하는 forEach

var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32

또는 ES6의 Array.prototype.entries 는 현재 브라우저 버전을 지원합니다.

for (const [i, value] of myArray.entries()) {
    console.log('%d: %s', i, value);
}

일반적으로 이터 러블의 경우 ( for…in 대신 for…of 루프를 사용하는 경우) 내장 된 항목이 없습니다.

function* enumerate(iterable) {
    let i = 0;

    for (const x of iterable) {
        yield [i, x];
        i++;
    }
}

for (const [i, obj] of enumerate(myArray)) {
    console.log(i, obj);
}

데모

실제로 평균 한 경우 for…in - 속성을 열거 - 당신은 추가 카운터가 필요합니다. Object.keys(obj).forEach 는 작동 할 수 있지만 자체 속성 만 포함합니다. for…in 은 프로토 타입 체인의 모든 위치에 열거 가능한 속성을 포함합니다.

출처 : https://stackoverflow.com/questions/10179815/get-loop-counter-index-using-for-of-syntax-in-javascript
728x90
반응형