Доступ к индексу элемента массива ES6 внутри цикла for-of

Es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}

Array#entries возвращает индекс и значение, если вам нужны оба:

for (let [index, value] of array.entries()) {

}

В цикле for..of мы можем достичь этого через array.entries(). array.entries возвращает новый объект итератора Array. Объект-итератор знает, как получить доступ к элементам из итеративного объекта в то же время, отслеживая его текущее положение в этой последовательности.

При вызове метода next() генерируются пары значений ключей итератора. В этих парах ключ-значение массив индекс является ключом, а элемент массива является значением.

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']

Цикл for..of - это, по сути, конструкция, которая потребляет итерацию и проходит по всем элементам (используя скрытый итератор). Мы можем объединить это с array.entries() следующим образом:

array = ['a', 'b', 'c'];

for (let indexValue of array.entries()) {
  console.log(indexValue);
}


// we can use array destructuring to conveniently
// store the index and value in variables
for (let [index, value] of array.entries()) {
   console.log(index, value);
}

В этом мире ярких новых нативных функций мы иногда забываем основы.

for (let i = 0; i < arr.length; i++) {
    console.log('index:', i, 'element:', arr[i]);
}

Чистый, эффективный, и вы все еще можете break цикл. Бонус ! Вы также можете начать с конца и вернуться назад с i--!

Дополнительное примечание: если вы много используете значение в цикле, вы можете захотеть сделать const value = arr[i]; в верхней части цикла для удобной и читаемой ссылки.

В контексте html / js, в современных браузерах с другими итерируемыми объектами, кроме массивов, мы также могли бы использовать [Iterable] .entries ():

for(let [index, element] of document.querySelectorAll('div').entries()) {

    element.innerHTML = '#' + index

}

var fruits = ["apple","pear","peach"];
for (fruit of fruits) {
    console.log(fruits.indexOf(fruit));
    //it shows the index of every fruit from fruits
}

Цикл for проходит через массив, а свойство indexof принимает значение индекса, соответствующего массиву. У этого метода есть некоторые недостатки с числами, поэтому используйте фрукты

Для тех, кто использует объекты, которые не являются Array или даже похожими на массивы, вы можете легко создать свою собственную итерацию, чтобы вы могли использовать for of для таких вещей, как localStorage, которые действительно имеют только {{Х3}} :

function indexerator(length) {
    var output = new Object();
    var index = 0;
    output[Symbol.iterator] = function() {
        return {next:function() {
            return (index < length) ? {value:index++} : {done:true};
        }};
    };
    return output;
}

Тогда просто введите номер:

for (let index of indexerator(localStorage.length))
    console.log(localStorage.key(index))

Другой подход мог бы использовать Array.prototype.forEach() как

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, index)
})

Вы также можете обрабатывать индекс самостоятельно, если вам нужен индекс , он не будет работать, если вам нужен ключ .

let i = 0;
for (const item of iterableItems) {
  // do something with index
  console.log(i);

  i++;
}