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

1. Классический цикл for (с индексом)

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

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

// Прямой перебор
for (let i = 0; i < users.length; i++) {
  console.log(`Привет, ${users[i]}!`);
}

// Обратный перебор
for (let i = users.length - 1; i >= 0; i--) {
  console.log(`Привет, ${users[i]}!`);
}

// Перебор каждого второго элемента
for (let i = 0; i < users.length; i += 2) {
  console.log(`Привет, ${users[i]}!`);
}

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

2. for...of (современный и чистый)

Появился в ES6. Позволяет перебирать значения массива напрямую, без индекса. Код становится короче и читаемее.

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

for (const user of users) {
  console.log(`Привет, ${user}!`);
}

Если нужен и индекс, можно использовать деструктуризацию с entries():

for (const [index, user] of users.entries()) {
  console.log(`Пользователь #${index + 1}: ${user}`);
}

Когда использовать: когда вам нужны только значения (или значения + индекс), и вы не планируете прерывать цикл. Это самый читаемый вариант для простого перебора.

3. forEach() — метод массива

Это функциональный подход. Вы передаёте callback-функцию, которая вызывается для каждого элемента. Метод не возвращает новый массив (в отличие от map).

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

users.forEach(function(user, index) {
  console.log(`Привет, ${user}! Ты #${index + 1} в списке.`);
});

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

Когда использовать: когда нужно выполнить действие над каждым элементом (вывести в консоль, изменить DOM, отправить запрос), и вы не планируете использовать break или continue (они не работают внутри forEach).

4. map() — преобразование массива

Если вам нужно создать новый массив на основе старого, используйте map(). Он возвращает новый массив той же длины.

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

const greetings = users.map(user => `Привет, ${user}!`);
console.log(greetings); // ["Привет, Анна!", "Привет, Иван!", "Привет, Мария!", "Привет, Петр!"]

Когда использовать: когда нужно преобразовать каждый элемент и получить новый массив. Например, из массива чисел получить массив их квадратов, или из массива объектов — массив имён.

Сводная таблица

• for — максимальный контроль, доступен break/continue, любой шаг.
• for...of — простой перебор значений, доступен break/continue.
• forEach — выполнение действия для каждого элемента, нет break/continue.
• map — создание нового массива на основе старого.

Совет для новичков: начинайте с for...of — он самый интуитивный. Когда освоитесь, переходите к forEach и map. Классический for используйте только когда нужны особые условия перебора.

const arr = ['a', 'b', 'c'];
arr.customProp = 'test';

// НЕПРАВИЛЬНО для массивов
for (let key in arr) {
  console.log(arr[key]); // 'a', 'b', 'c', 'test' — лишнее свойство!
}

// ПРАВИЛЬНО: for...of
for (let value of arr) {
  console.log(value); // 'a', 'b', 'c'
}

const numbers = [1, 2, 3, 4, 5];

// Сумма всех чисел
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // 15

// Преобразование массива в объект
const users = ['Анна', 'Иван', 'Мария'];
const usersObj = users.reduce((acc, name, index) => {
  acc[index] = name;
  return acc;
}, {});
console.log(usersObj); // {0: 'Анна', 1: 'Иван', 2: 'Мария'}