Получить счетчик / индекс цикла, используя для… синтаксиса в JavaScript

Внимание:

Вопрос по-прежнему относится к for…ofциклам.> Не используйте for…inдля итерации по массиву , используйте его для итерации по свойствам объекта. Тем не менее, это

Я понимаю, что основной for…inсинтаксис в JavaScript выглядит так:

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цикл. Я думаю, что они выглядят лучше и имеют больше смысла.

Есть ли более простой или более элегантный способ?

В Python это просто:

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

for…inперебирает имена свойств, а не значения, и делает это в неопределенном порядке (да, даже после ES6). Вы не должны использовать его для перебора массивов. Для них есть forEachметод ES5, который передает значение и индекс функции, которую вы ему передаете:

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…ofцикл вместо a 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 (let [index, val] of array.entries()) {
        // your code goes here    
}

Обратите внимание, что Array.entries()возвращается итератор , который позволяет ему работать в цикле for; не путайте это с 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 - COUNTER / INDEX

Примечание: Ключ метода () недоступен для IE версии <9, вы должны использовать код Polyfill . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Циклы for-in-loop перебирают свойства объекта. Не используйте их для массивов, даже если они иногда работают.

Свойства объекта в этом случае не имеют индекса, все они равны и не должны просматриваться в определенном порядке. Если вы хотите посчитать свойства, вам нужно установить дополнительный счетчик (как вы это делали в первом примере).

цикл по массиву:

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 для добавления поддержки старых браузеров.

Ответ от rushUp верен, но это будет удобнее

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

Вот функция, eachWithIndexкоторая работает с чем угодно итеративным.

Вы также можете написать аналогичную функцию, eachWithKeyкоторая работает с использованием объектов 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. Для многих разработчиков это кажется нелогичным , поэтому я создал этот тестовый стенд .

Это ~ в 6 раз быстрее. Главным образом потому, что не нужно: а) обращаться к массиву более одного раза и б) приводить индекс.