[javascript] JavaScript에서 for… of 구문을 사용하여 루프 카운터 / 인덱스 가져 오기

JAVASCRIPT / 글쓴이

주의:

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

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

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 이후에도). 배열을 반복하는 데 사용해서는 안됩니다. 그것들을 위해 ES5의 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

또는 Array.prototype.entries현재 브라우저 버전을 지원하는 ES6 ‘s :

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

일반적으로 iterables (의 for…of루프 대신 루프를 사용하는 경우 for…in)에는 내장 기능이 없습니다.

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프로토 타입 체인의 어느 곳에서나 열거 가능한 속성을 포함합니다.

답변

ES6에서는 for-of-loop를 사용하는 것이 좋습니다. 이 같은 인덱스를 얻을 수 있습니다

for (let [index, val] of array.entries()) {
        // your code goes here    
}

for-of 루프에서 작동 할 수 있는 iterator 를 Array.entries()리턴 합니다 . 키-값 쌍 의 배열 을 반환하는 Object.entries () 와 이것을 혼동하지 마십시오 .

답변

이건 어때요

let numbers = [1,2,3,4,5]
numbers.forEach((number, index) => console.log(`${index}:${number}`))

여기서 array.forEach이 방법은 보유 index배열 처리중인 현재 요소의 인덱스 파라미터.

답변

소규모 어레이 수집을위한 솔루션 :

for (var obj in arr) {
    var i = Object.keys(arr).indexOf(obj);
}

arr -ARRAY,
obj- 현재 요소의 키,
i- 카운터 / 인덱스

참고 : IE 버전 <9에서는 메소드 키 () 를 사용할 수 없으므로 사용해야합니다. 없으므로 Polyfill 코드를 합니다.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

답변

For-in-loops는 객체의 속성을 반복합니다. 때때로 작동하더라도 배열에 사용하지 마십시오.

그런 다음 객체 속성에 인덱스가 없으며 모두 같으며 정해진 순서대로 실행하지 않아도됩니다. 속성을 계산하려면 첫 번째 예에서와 같이 추가 카운터를 설정해야합니다.

배열에 루프 :

var a = [];
for (var i=0; i<a.length; i++) {
    i // is the index
    a[i] // is the item
}

객체를 반복 :

var o = {};
for (var prop in o) {
    prop // is the property name
    o[prop] // is the property value - the item
}

답변

다른 사람들이 말했듯이 for..in을 사용하여 배열을 반복해서는 안됩니다.

for ( var i = 0, len = myArray.length; i < len; i++ ) { ... }

더 깨끗한 구문을 원하면 forEach를 사용할 수 있습니다.

myArray.forEach( function ( val, i ) { ... } );

이 방법을 사용하려면 ES5 shim을 포함시켜 이전 브라우저에 대한 지원을 추가하십시오.

답변

rushUp이 제공 한 답변은 정확하지만 더 편리합니다. 

for (let [index, val] of array.entries() || []) {
   // your code goes here    
}