Как перебрать массив в JavaScript: forEach, for...of и другие методы

Почему "перебрать массив" — это база, которую нужно знать наизусть

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

Вопрос "Loop (for each) over an array in JavaScript" на Stack Overflow собрал тысячи просмотров. Это значит, что даже опытные разработчики иногда путаются в нюансах. Мы разложим всё по полочкам: от классического for до современного for...of и мощного forEach. Вы узнаете, когда какой метод использовать, и перестанете бояться массивов.

Метод №1: Классический цикл for — дедушка всех переборов

Самый старый и понятный способ. Вы сами управляете счётчиком и условием выхода. Идеально, когда нужно прервать цикл досрочно или пропустить несколько элементов.

const fruits = ['яблоко', 'банан', 'апельсин'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`Фрукт №${i + 1}: ${fruits[i]}`);
}

Плюсы: полный контроль, можно использовать break и continue.
Минусы: многословно, легко ошибиться в индексах.

Когда использовать классический for

• Нужно досрочно остановить перебор (например, при поиске элемента).
• Требуется доступ к индексу (не только к значению).
• Вы работаете с многомерными массивами.

Метод №2: forEach — король обходов в JavaScript

Этот метод — ответ на вопрос "Loop (for each) over an array in JavaScript" в 90% случаев. Он вызывается прямо у массива и принимает функцию обратного вызова (callback), которая выполняется для каждого элемента.

const fruits = ['яблоко', 'банан', 'апельсин'];
fruits.forEach(function(fruit, index) {
    console.log(`Фрукт №${index + 1}: ${fruit}`);
});

// То же самое со стрелочной функцией (современный стиль):
fruits.forEach((fruit, index) => {
    console.log(`Фрукт №${index + 1}: ${fruit}`);
});

Важно: forEach не возвращает новый массив (в отличие от map). Он просто выполняет действие для каждого элемента. И да, break и continue тут не работают — если нужно прервать цикл, используйте for...of или классический for.

Параметры callback-функции forEach

• Первый параметр — текущий элемент массива (обязателен).
• Второй параметр — индекс элемента (необязателен).
• Третий параметр — сам массив (нужен редко).

[10, 20, 30].forEach((value, index, array) => {
    console.log(`Элемент ${value} на позиции ${index} в массиве [${array}]`);
});

Метод №3: for...of — современный и элегантный

Появился в ES6 (2015) и сразу полюбился разработчикам. Он работает не только с массивами, но и с любыми итерируемыми объектами (строки, Set, Map).

const fruits = ['яблоко', 'банан', 'апельсин'];
for (const fruit of fruits) {
    console.log(`Фрукт: ${fruit}`);
}

Главное преимущество: можно использовать break и continue. А ещё код выглядит чисто и читаемо.

Как получить индекс в for...of

Если нужен индекс, используйте метод entries():

for (const [index, fruit] of fruits.entries()) {
    console.log(`Фрукт №${index + 1}: ${fruit}`);
}

Метод №4: map — когда нужно создать новый массив

Если вы хотите не просто перебрать, а преобразовать каждый элемент и получить новый массив той же длины, используйте map. Это одна из самых популярных функций высшего порядка в JavaScript.

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16, 25]

Важно: map возвращает новый массив, не изменяя исходный. Если вы просто хотите выполнить действие (например, вывести в консоль), лучше использовать forEach.

Метод №5: filter — для отбора элементов

Часто нужно не просто перебрать массив, а выбрать из него элементы, удовлетворяющие условию. filter возвращает новый массив только с теми элементами, для которых callback вернул true.

const ages = [15, 22, 18, 30, 12, 45];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [22, 18, 30, 45]

Метод №6: reduce — для агрегации данных

Когда нужно "свернуть" массив в одно значение (сумма, произведение, объект), приходит reduce. Это мощный, но поначалу пугающий метод.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0); // 0 — начальное значение аккумулятора
console.log(sum); // 15

Разбор: аккумулятор (первый параметр) сохраняет промежуточный результат. Начальное значение 0. На каждой итерации мы прибавляем к нему текущий элемент.

Сравнительная таблица: какой метод выбрать

Метод	Создаёт новый массив?	Можно прервать (break)?	Когда использовать
for	Нет	Да	Полный контроль, досрочный выход
forEach	Нет	Нет	Просто выполнить действие для каждого
Блоги HTTP клиент на Rust: делаем запросы правильно от А до Я Профилирование TypeScript кода: находим узкие места для начинающих Расширение файла в PHP: 5 способов в 2025 (вопрос с Stack Overflow) Рекомендаций по книгам Алгоритмы машинного обучения: базовый курс Архитектура Swift (iOS/macOS) приложений. Паттерны и практики Машинное обучение и Swift: от идеи до приложения C++ Templates: Полное руководство Читайте также Безопасность TypeScript приложений: топ-10 уязвимостей на практике Decimal vs Double в C#: что выбрать и когда? Гайд 2025 Service Mesh в Go: как подружить микросервисы без боли Обработка ошибок в C++: try, catch и современные подходы Доступный Kotlin: пишем код, который не бросает пользователей 🍪 Сначала примите условия Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie. Мы используем их для авторизации и улучшения работы сайта. Политика конфиденциальности Принять и продолжить Закрыть 🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта. Продолжая пользоваться сайтом, вы соглашаетесь с нашей политикой конфиденциальности. Принять Только необходимые