Как правильно перебрать массив в JavaScript: forEach, for...of или обычный цикл for?

Основные способы перебора массива в JavaScript

Вы правы, все три способа работают, но у каждого есть свои особенности, области применения и подводные камни. Давайте разберем их подробно, а также затронем for...in и задачу создания нового массива.

1. Обычный цикл for

Это самый старый и универсальный способ. Он дает вам полный контроль над итерацией:

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 1, 2, 3, 4, 5
}

• Плюсы: Можно управлять шагом (например, перебирать каждый второй элемент), можно прервать цикл через break или пропустить итерацию через continue. Работает во всех версиях JS.
• Минусы: Многословный, легко ошибиться в индексах. Не очень читаемый для простых задач.
• Когда использовать: Когда нужен доступ к индексу элемента, когда нужно изменить шаг итерации, или когда производительность критична (обычный for самый быстрый).

2. Метод forEach

Это современный метод массивов, который принимает функцию обратного вызова:

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array) {
  console.log(item); // 1, 2, 3, 4, 5
});

• Плюсы: Очень читаемый, не нужно думать об индексах. Функция автоматически получает текущий элемент, индекс и сам массив (последние два опциональны).
• Минусы: Нельзя использовать break или continue — цикл всегда пройдет по всем элементам. Если нужно прерваться, используйте for...of или обычный for.
• Когда использовать: Для простого перебора всех элементов без необходимости прерывания. Идеально для вывода данных или вызова функции для каждого элемента.

3. Цикл for...of (ES6)

Самый современный и элегантный способ перебора итерируемых объектов (массивы, строки, Map, Set и т.д.):

let arr = [1, 2, 3, 4, 5];
for (let item of arr) {
  console.log(item); // 1, 2, 3, 4, 5
}

• Плюсы: Очень краткий, поддерживает break и continue, работает с любыми итерируемыми объектами.
• Минусы: Нет прямого доступа к индексу элемента (но можно получить его через arr.indexOf(item), хотя это неэффективно).
• Когда использовать: Когда нужно перебрать все элементы, возможно с прерыванием, и индекс не нужен. Это лучший выбор в 80% случаев.

4. Почему не for...in?

Цикл for...in предназначен для перебора свойств объектов, а не массивов:

let arr = [1, 2, 3];
arr.foo = 'bar';
for (let key in arr) {
  console.log(key); // "0", "1", "2", "foo"
}

Он перебирает не только индексы, но и все перечисляемые свойства, включая добавленные вручную. Порядок элементов не гарантируется. Используйте for...in только для объектов.

Как создать новый массив?

Для создания нового массива на основе существующего используйте метод map() — это самый правильный и функциональный подход:

let arr = [1, 2, 3, 4, 5];
let doubled = arr.map(function(item) {
  return item * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

// Или стрелочная функция (ES6):
let doubledArrow = arr.map(item => item * 2);
console.log(doubledArrow); // [2, 4, 6, 8, 10]

map() возвращает новый массив той же длины, не изменяя исходный. Если вам нужно отфильтровать элементы, используйте filter(), если свернуть массив в одно значение — reduce().

Краткая шпаргалка:

• Просто перебрать все элементы: for...of или forEach
• Нужен индекс: обычный for или forEach (второй параметр)
• Нужно прерваться: обычный for или for...of
• Создать новый массив: map()
• Выполнить действие для каждого элемента: forEach

Начните с for...of для большинства задач — это современно, читаемо и гибко.

let numbers = [1, 2, 3, 4, 5, 6];

// Императивный подход (как):
let result = [];
for (let num of numbers) {
  if (num % 2 === 0) {
    result.push(num * 3);
  }
}

// Декларативный подход (что):
let resultBetter = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 3);