Справочник · JavaScript

Метод forEach(): перебор массива

Редакция PraktumОбновлено 25 октября 20265 мин чтенияУровень: новичок

Метод forEach(callback) вызывает функцию для каждого элемента массива по порядку. Функция получает элемент, его индекс и сам массив. forEach ничего не возвращает (undefined) и не умеет останавливаться посередине: break и return не прерывают перебор. Если нужно новое значение — используй map, если нужна остановка — for...of.

Минимальный пример

const tasks = ['Купить хлеб', 'Позвонить маме', 'Сделать ДЗ'];
const list = document.querySelector('#tasks');

tasks.forEach((task, index) => {
  const li = document.createElement('li');
  li.textContent = `${index + 1}. ${task}`;
  list.append(li);
});

Для каждой задачи создаётся пункт списка с номером. forEach подходит, когда нужно сделать что-то с каждым элементом — вывести, отправить, изменить DOM — без сбора нового массива.

Аргументы callback

Чаще всего нужны первые два. Пустые ячейки разреженного массива forEach пропускает.

Почему нельзя прервать

[1, 2, 3, 4].forEach((n) => {
  if (n === 2) return;   // пропустит только 2, перебор продолжится
  console.log(n);        // 1, 3, 4
});

for (const n of [1, 2, 3, 4]) {
  if (n === 3) break;    // остановится
  console.log(n);        // 1, 2
}

[1, 2, 3, 4].some((n) => n === 3);   // true — остановится на 3

return внутри callback выходит только из текущего вызова функции — это аналог continue. break внутри функции — синтаксическая ошибка. Если нужно остановиться, используй for...of, или find/some/every, которые сами прекращают перебор, когда ответ найден.

forEach или map

// плохо: forEach + push
const names = [];
users.forEach((u) => names.push(u.name));

// хорошо: map
const names2 = users.map((u) => u.name);

Если цель — новый массив из преобразованных элементов, map короче и понятнее. forEach — для побочных эффектов: вывода, изменения DOM, отправки данных. Подробнее — метод map.

forEach и async/await

// не ждёт: forEach запустит все запросы и сразу завершится
ids.forEach(async (id) => {
  await saveItem(id);
});
console.log('готово');   // напечатается раньше, чем сохранится

// по очереди
for (const id of ids) {
  await saveItem(id);
}

// параллельно, но дождаться всех
await Promise.all(ids.map((id) => saveItem(id)));

forEach не знает про промисы и не ждёт асинхронные функции. Для последовательного выполнения — for...of с await, для параллельного — Promise.all с map.

Перебор элементов страницы

document.querySelectorAll('.faq-item').forEach((item) => {
  item.querySelector('button').addEventListener('click', () => {
    item.classList.toggle('is-open');
  });
});

// HTMLCollection forEach не имеет
[...document.getElementsByClassName('card')].forEach((card) => { /* … */ });

У NodeList из querySelectorAll есть forEach. У HTMLCollection из getElementsByClassName — нет, её сначала превращают в массив.

Изменение массива во время перебора

const arr = [2, 4, 6, 7];
arr.forEach((n, i) => {
  if (n % 2 === 0) arr.splice(i, 1);   // индексы сдвигаются
});
arr;  // [4, 7] — четвёрка пропущена

const odd = [2, 4, 6, 7].filter((n) => n % 2 !== 0);   // [7] — правильно

Удаление элементов внутри forEach сдвигает индексы, и часть элементов пропускается. Для удаления используй filter, который создаёт новый массив.

forEach или for...of

Частые ошибки

• Пытаются выйти из forEach через break или return.
• Используют forEach + push вместо map.
• Пишут await внутри forEach и ждут последовательного выполнения.
• Удаляют элементы из массива во время перебора.
• Ждут, что forEach вернёт новый массив.

Доступность

Создавая элементы в цикле, добавляй их в DOM разом через фрагмент или append с несколькими аргументами — меньше перерисовок. Для динамически добавленных списков сообщай о результате через aria-live, например «Найдено 12 товаров».

Поддержка браузерами

forEach поддерживается всеми браузерами. forEach у NodeList — во всех актуальных браузерах.

const cart = [
  { name: 'Кроссовки', price: 5990 },
  { name: 'Носки', price: 390 },
];
const list = document.querySelector('#cart');

cart.forEach(({ name, price }) => {
  const li = document.createElement('li');
  li.textContent = `${name} — ${price} ₽`;
  list.append(li);
});

const total = cart.reduce((sum, item) => sum + item.price, 0);
document.querySelector('#total').textContent = `${total} ₽`;