Перебор массива

Перебрать массив — значит выполнить одно и то же действие для каждого элемента: вывести список, посчитать сумму, найти самый дорогой товар. В JavaScript для этого есть несколько способов, и у каждого своё удобство.

Цикл for...of

Самый простой способ — цикл for...of. На каждом шаге переменная получает очередной элемент массива:

const fruits = ['яблоко', 'груша', 'слива'];
 
for (const fruit of fruits) {
  console.log(fruit);
}
// яблоко
// груша
// слива

Переменную объявляют через const: на каждом шаге создаётся новая переменная, и внутри шага её не меняют.

Сумма элементов

Перебор часто нужен, чтобы что-то накопить. Заводят переменную до цикла и на каждом шаге добавляют к ней элемент:

const prices = [120, 80, 300];
let total = 0;
 
for (const price of prices) {
  total += price;
}
 
console.log(total); // 500

Классический for с индексом

Цикл for со счётчиком нужен, когда важен сам индекс: например, чтобы обработать только чётные позиции или сравнить соседние элементы:

const fruits = ['яблоко', 'груша', 'слива'];
 
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}
// 0: яблоко
// 1: груша
// 2: слива

Условие i < fruits.length останавливает цикл на последнем индексе.

forEach

Метод forEach() вызывает переданную функцию для каждого элемента. Функция получает сам элемент и его индекс:

const fruits = ['яблоко', 'груша'];
 
fruits.forEach((fruit, index) => {
  console.log(`${index + 1}. ${fruit}`);
});
// 1. яблоко
// 2. груша

Функцию, которую передают другой функции, называют колбэком.

Индекс и значение в for...of

Если в for...of нужен ещё и индекс, перебирают entries(). Он выдаёт пары «индекс, элемент», которые сразу раскладывают по двум переменным:

const fruits = ['яблоко', 'груша'];
 
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}
// 0 яблоко
// 1 груша

Частая ошибка

Из forEach() нельзя выйти досрочно: break внутри функции вызовет ошибку, а return лишь завершит текущий шаг. Если перебор нужно прервать, используйте for...of:

const numbers = [3, 8, 15, 4];
 
for (const number of numbers) {
  if (number > 10) {
    console.log(`Нашли: ${number}`); // Нашли: 15
    break;
  }
}