Отримайте цикл / індекс циклу, використовуючи для… синтаксису в 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-of; не плутайте це з 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 - KEY поточного елемента, i - COUNTER / INDEX

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

Для циклу ітерація властивостей об'єкта. Не використовуйте їх для масивів, навіть якщо вони іноді працюють.

Властивості об'єктів тоді не мають індексу, всі вони рівні і не потрібно проходити у визначеному порядку. Якщо ви хочете порахувати властивості, вам доведеться встановити додатковий лічильник (як це було в першому прикладі).

петля над масивом:

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++ ) { ... }

Якщо ви хочете більш чистий синтаксис, ви можете використовувати дляEach:

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 разів швидше. Головним чином, тому, що не потрібно: а) отримувати доступ до масиву не один раз і б) вносити індекс.