it-roy-ru.com

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

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

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

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

153
Abdennour TOUMI

Используйте Array.prototype.keys :

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

Если вы хотите получить доступ и к ключу, и к значению, вы можете использовать Array.prototype.entries() with destructuring :

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

229
Michał Perłakowski

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

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

}
246
Felix Kling

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

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

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

12
chris

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

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

    element.innerHTML = '#' + index

}
2
Joseph Merdrignac

В цикле 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

es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}
0
solanki...
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 принимает значение индекса, соответствующего массиву P.D этот метод имеет некоторые недостатки с числами, поэтому используйте фрукты

0
Edwin Felipe

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