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

Ми можемо отримати доступ до елементів масиву за допомогою циклу for-of:

for (const j of [1, 2, 3, 4, 5]) {
  console.log(j);
}

Як я можу змінити цей код, щоб отримати доступ до поточного індексу? Я хочу досягти цього за допомогою синтаксису for-of, ні forEach, ні for-in.

Використання Array.prototype.keys:

for (const index of [1, 2, 3, 4, 5].keys()) {
  console.log(index);
}

Якщо ви хочете отримати доступ як до ключа, так і до значення, ви можете використовувати Array.prototype.entries()для деструктуризації :

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
  console.log(index, value);
}

Array#entries повертає індекс і значення, якщо вам потрібно і те, і інше:

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

}

У цьому світі кричущих нових рідних функцій ми іноді забуваємо про основи.

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

Чистий, ефективний, і ви все одно можете breakпетлю. Бонус! Ви також можете почати з кінця та йти назад i--!

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

в контексті html / js, в сучасних браузерах, з іншими ітерабельними об'єктами, крім Arrays, ми також могли використовувати [Iterable] .entries ():

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

    element.innerHTML = '#' + index

}

У for..ofциклі ми можемо досягти цього за допомогою array.entries(). array.entriesповертає новий об’єкт ітератора масиву. Об'єкт ітератора знає, як отримати доступ до елементів з ітерабельного одночасно, зберігаючи його поточне положення у цій послідовності.

Коли 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);
}

Ви також можете самостійно обробляти індекс, якщо вам потрібен індекс , він не працюватиме, якщо вам потрібен ключ .

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

  i++;
}

Для тих , хто використовує об'єкти , які не є Arrayабо навіть масив , як ви можете створити свою власну ітерацію легко , так що ви все ще можете використовувати for ofдля таких речей , як , localStorageякі на насправді є тільки length:

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))

es6 for...in

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

Іншим підходом може бути використання Array.prototype.forEach()як

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, 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 приймає значення індексу, що відповідає масиву. ПД цей метод має деякі недоліки з цифрами, тому використовуйте фрукти