Javascript — Для и Для/в против Для/каждого и Для/из

Привет,

В JavaScript существует множество способов перебора массивов и объектов, поэтому иногда возникает путаница между ними 😕

Начнем со сравнения

Обзор синтаксиса

Циклические конструкции for и for/in дают вам доступ к индексу в массиве, а не к фактическому элементу.

const arr = ['a', 'b', 'c'];
// with for and for/in loop you can get element using arr[i]
for (let i = 0; i < arr.length; ++i) {
  console.log(arr[i]);
}

for (let i in arr) {
  console.log(arr[i]);
}

forEach() и for/of вы получаете доступ к самому элементу массива.

*С forEach() можно получить доступ к индексу массива i, с for/of нельзя.

const arr = ['a', 'b', 'c'];
// with for and for/of loop you can get element direclty
arr.forEach((item, i) => console.log(item) );

for (const item of arr) {
  console.log(arr[i]);
}

Пустой/неопределенный элемент

Массивы JavaScript допускают пустые элементы.

forEach() и for/in пропускают пустые элементы массива, for и for/of — нет.

const arr = ['a',, 'c']; or const arr = ['a', undefined,'c']
for (let i = 0; i < arr.length; ++i) {
  console.log(arr[i]);
}
// Prints "a, undefined, c"

arr.forEach(v => console.log(v));
// Prints "a, c"

for (let i in arr) {
  console.log(arr[i]);
}
// Prints "a, c"

for (const v of arr) {
  console.log(v);
}
// Prints "a, undefined, c"

Async/Await и генераторы

Еще один пограничный случай с forEach() заключается в том, что он не совсем правильно работает с async/await или генераторами. Если ваш обратный вызов forEach() является синхронным, это не имеет значения, но вы не можете использовать await в обратном вызове forEach().

— — — — — — — — — — — — — — — — — — — — — — — — — — — -

Вопрос для вас

Как мы можем получить индекс в цикле for/of? сначала подумай…

.

.

.

Вот ответ

Чтобы получить доступ к текущему индексу массива в цикле for/of, вы можете использовать функцию Array#entries().

for (const [i, v] of arr.entries()) {
  console.log(i, v); // Prints "0 a", "1 b", "2 c"
}

Спасибо за чтение. Надеюсь, это поможет.