Перебор массива (for, for...of)

Урок: Перебор массива (for, for...of)

Введение

Когда мы начинаем работать с массивами, довольно быстро возникает задача: «что-то сделать с каждым элементом».

Представь список товаров. Нужно вывести их на экран. Или список чисел — нужно посчитать сумму. Или список пользователей — нужно проверить каждого.

Можно, конечно, обратиться к каждому элементу вручную:

let numbers = [1, 2, 3];

console.log(numbers[0]);
console.log(numbers[1]);
console.log(numbers[2]);

Но это работает только для очень маленьких массивов. В реальности элементов может быть десятки, сотни или тысячи.

Поэтому в JavaScript существуют способы перебора массива — механизмы, которые позволяют пройтись по каждому элементу автоматически.

В этом уроке мы разберём два основных способа: классический цикл for и более современный for...of.

Зачем нужен перебор массива

Перебор — это процесс, при котором мы по очереди обращаемся к каждому элементу массива.

Например, у нас есть массив:

let numbers = [10, 20, 30];

console.log('Массив для дальнейшего перебора:', numbers);

Если мы хотим, например, вывести каждый элемент, нам нужно получить доступ ко всем значениям.

Перебор позволяет:

  • обрабатывать каждый элемент;
  • изменять данные;
  • выполнять вычисления;
  • строить интерфейс.

Это одна из самых частых операций в программировании.

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

Начнём с самого базового способа — цикла for.

let numbers = [10, 20, 30];

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

Разберём этот код.

  • let i = 0 — создаём переменную-счётчик, начинаем с нуля;
  • i < numbers.length — условие: пока индекс меньше длины массива;
  • i++ — увеличиваем индекс на 1 после каждой итерации.

Внутри цикла обычно пишут, например, console.log(numbers[i]), чтобы увидеть элемент. Само выражение доступа по индексу:

let numbers = [10, 20, 30];
let i = 1;

console.log('Текущий индекс', i, '→ элемент', numbers[i]);

— возвращает значение по индексу i (здесь 20).

Результат:

10
20
30

Важно понять: здесь мы не перебираем сами значения, а перебираем индексы и через них получаем элементы.

Как работает цикл по шагам

Разберём, что происходит при выполнении заголовка цикла (это неполный код — в text показана только «шапка»):

for (let i = 0; i < numbers.length; i++)

Если numbers = [10, 20, 30], то:

  1. i = 0 → numbers[0] → 10
  2. i = 1 → numbers[1] → 20
  3. i = 2 → numbers[2] → 30
  4. i = 3 → условие i < 3 уже false → цикл заканчивается

Таким образом, цикл проходит по всем элементам.

Когда полезен обычный for

Цикл for особенно полезен, когда нам нужен контроль над индексом.

Например:

let numbers = [10, 20, 30];

for (let i = 0; i < numbers.length; i++) {
  console.log(i, numbers[i]);
}

Здесь мы выводим и индекс, и значение.

Также for удобен, если нужно:

  • пропускать элементы;
  • идти в обратном порядке;
  • изменять шаг.

Цикл for...of — более простой способ

Если нам не нужен индекс, можно использовать более простой и читаемый вариант — for...of.

let numbers = [10, 20, 30];

for (let number of numbers) {
  console.log(number);
}

Результат:

10
20
30

Здесь:

  • number — это текущий элемент массива;
  • numbers — сам массив.

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

Как работает for...of

Цикл for...of по очереди берёт каждый элемент массива и присваивает его переменной.

На каждом шаге:

  • сначала number = 10,
  • потом number = 20,
  • потом number = 30.

Это делает код более простым и понятным.

Сравнение подходов

Посмотрим на два варианта рядом.

Через for:

let numbers = [10, 20, 30];

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

Через for...of:

let numbers = [10, 20, 30];

for (let number of numbers) {
  console.log(number);
}

Во втором случае код короче и легче читается.

Но у него есть ограничение — он не даёт доступ к индексу напрямую.

Изменение элементов массива

Через for можно изменять элементы:

let numbers = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  numbers[i] = numbers[i] * 2;
}

console.log(numbers);

Результат:

[2, 4, 6]

Здесь мы изменяем сам массив.

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

let numbers = [1, 2, 3];

for (let number of numbers) {
  number = number * 2;
}

console.log('Массив не изменился:', numbers);

Этот код не изменит массив.

Это важное отличие.

Где это используется на практике

Перебор массива используется почти в любой задаче.

Когда нужно:

  • вывести список на страницу;
  • обработать данные с сервера;
  • посчитать сумму;
  • отфильтровать значения;
  • проверить каждый элемент.

Например:

  • список товаров;
  • сообщения в чате;
  • комментарии;
  • результаты поиска.

Без перебора невозможно работать с коллекциями данных.

Итоговое понимание

Перебор массива — это способ последовательно обработать каждый элемент.

Цикл for даёт полный контроль: можно управлять индексом и логикой. for...of делает код проще и удобнее, когда нужен только сам элемент.

Ключевая идея — не просто пройтись по массиву, а понять, что это основной способ работы с группами данных.

Если массив — это список, то перебор — это способ «пройтись» по нему и сделать с каждым элементом нужное действие.