Мы можем получить доступ к элементам массива, используя цикл for:

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

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

331
Abdennour TOUMI 18 Дек 2015 в 08:15

10 ответов

Лучший ответ

Используйте 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);
}
329
Christophe Marois 24 Июн 2017 в 23:15

Es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}
0
solanki... 27 Апр 2019 в 15:25

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

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

}
284
Felix Kling 18 Дек 2015 в 06:33

В цикле 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);
}
1
Willem van der Veen 28 Сен 2018 в 07:37

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

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

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

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

24
chris 12 Апр 2019 в 21:43

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

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

    element.innerHTML = '#' + index

}
3
Joseph Merdrignac 12 Дек 2017 в 21:25
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 принимает значение индекса, соответствующего массиву. У этого метода есть некоторые недостатки с числами, поэтому используйте фрукты

-6
Edwin Felipe 13 Сен 2018 в 05:45

Для тех, кто использует объекты, которые не являются 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))
0
Hashbrown 12 Июл 2018 в 09:47

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

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, index)
})
0
Saksham 27 Янв 2020 в 10:56

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

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

  i++;
}
1
Angular 27 Янв 2020 в 14:18