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

주의:

질문은 여전히 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    
}

여기 함수가 있습니다 eachWithIndex반복 가능한 모든 것에서 작동 가 있습니다.

을 eachWithKey사용하여 objet과 작동 하는 유사한 기능 을 작성할 수도 있습니다 for...in.

// example generator (returns an iterator that can only be iterated once)
function* eachFromTo(start, end) { for (let i = start; i <= end; i++) yield i }

// convers an iterable to an array (potential infinite loop)
function eachToArray(iterable) {
    const result = []
    for (const val of iterable) result.push(val)
    return result
}

// yields every value and index of an iterable (array, generator, ...)
function* eachWithIndex(iterable) {
    const shared = new Array(2)
    shared[1] = 0
    for (shared[0] of iterable) {
        yield shared
        shared[1]++
    }
}

console.log('iterate values and indexes from a generator')
for (const [val, i] of eachWithIndex(eachFromTo(10, 13))) console.log(val, i)

console.log('create an array')
const anArray = eachToArray(eachFromTo(10, 13))
console.log(anArray)

console.log('iterate values and indexes from an array')
for (const [val, i] of eachWithIndex(anArray)) console.log(val, i)

제너레이터의 장점은 게으 르며 다른 제너레이터의 결과를 인수로 취할 수 있다는 것입니다.

그것은 (느린) 프라임 검색의 예와 함께 인덱스와 전달 된 생성기 함수 값을 산출하는 복합 반복기의 내 버전입니다.

const eachWithIndex = (iterable) => {
  return {
    *[Symbol.iterator]() {
      let i = 0
      for(let val of iteratable) {
        i++
          yield [i, val]
      }
    }
  }

}

const isPrime = (n) => {
  for (i = 2; i < Math.floor(Math.sqrt(n) + 1); i++) {
    if (n % i == 0) {
      return false
    }
  }
  return true
}

let primes = {
  *[Symbol.iterator]() {
    let candidate = 2
    while (true) {
      if (isPrime(candidate)) yield candidate
        candidate++
    }
  }
}

for (const [i, prime] of eachWithIndex(primes)) {
  console.log(i, prime)
  if (i === 100) break
}

모든 사람들이 게시 한 훌륭한 답변 외에도 가장 우수한 솔루션은 ES6이라고 덧붙이고 싶습니다 entries. 여기에 많은 개발자들에게는 금기 사항이있어서 이 있으므로이 perf benchamrk을 .

~ 6 배 더 빠릅니다. 주로 a) 배열에 두 번 이상 액세스하고 b) 인덱스를 캐스트 할 필요가 없기 때문입니다.