Как перебрать все элементы массива в JavaScript? Циклы, forEach и современные методы

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

Перебор (итерация) массива — одна из самых частых операций в JavaScript. Рассмотрим все основные способы от классики до современного синтаксиса.

1. Классический цикл for

Самый базовый и быстрый способ. Вы контролируете индекс, начальное и конечное значение.

let users = ["Анна", "Иван", "Мария", "Петр"];

for (let i = 0; i < users.length; i++) {
  console.log(users[i]); // Анна, Иван, Мария, Петр
}

Плюсы: максимальная производительность, полный контроль (можно идти с конца, через шаг, etc.).
Минусы: многословно, легко ошибиться в условии.

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

Современный и читаемый способ. Проходит по значениям массива.

for (let user of users) {
  console.log(user); // Анна, Иван, Мария, Петр
}

Можно использовать с entries(), если нужен индекс:

for (let [index, user] of users.entries()) {
  console.log(`${index}: ${user}`); // 0: Анна, 1: Иван...
}

3. Метод forEach()

Функциональный стиль. Принимает callback-функцию, которая выполняется для каждого элемента.

users.forEach(function(user, index) {
  console.log(`${index}: ${user}`);
});

// То же самое со стрелочной функцией:
users.forEach((user, index) => console.log(`${index}: ${user}`));

Важно: forEach нельзя прервать (не работает break). Если нужно досрочно выйти — используйте for...of или some().

4. Методы map(), filter(), reduce()

Это не просто циклы, а методы для трансформации данных. Они создают новый массив на основе исходного.

• map() — преобразует каждый элемент и возвращает новый массив:

let upperUsers = users.map(user => user.toUpperCase());
console.log(upperUsers); // ["АННА", "ИВАН", "МАРИЯ", "ПЕТР"]

• filter() — фильтрует элементы по условию:

let longNames = users.filter(user => user.length > 4);
console.log(longNames); // ["Мария"]

• reduce() — свёртка массива в одно значение:

let allNames = users.reduce((acc, user) => acc + ' ' + user, '');
console.log(allNames); // "Анна Иван Мария Петр"

5. Устаревшие и редкие способы

• for...in — не используйте для массивов! Он перебирает ключи (свойства), а не элементы, и может захватить прототипные свойства.
• while — редко используется для массивов, только если нужна особая логика:

let i = 0;
while (i < users.length) {
  console.log(users[i]);
  i++;
}

Рекомендация для новичка

Начните с for...of — он простой, читаемый и современный. Когда освоитесь, переходите к forEach и методам map/filter/reduce. Классический for используйте только когда нужна максимальная производительность или нестандартный шаг итерации.

Попробуйте прямо сейчас в консоли браузера (F12 → Console):

let test = [10, 20, 30];
for (let num of test) {
  console.log(num * 2); // 20, 40, 60
}

function iterateArray(arr, index = 0) {
  if (index >= arr.length) return; // базовый случай
  console.log(arr[index]);
  iterateArray(arr, index + 1); // рекурсивный вызов
}

let fruits = ["яблоко", "банан", "апельсин"];
iterateArray(fruits);
// яблоко
// банан
// апельсин

let doubled = Array.from([1, 2, 3], x => x * 2);
console.log(doubled); // [2, 4, 6]