webrun

Цикл for в JavaScript: обход массива по индексу

Цикл JavaScript for повторяет блок кода заданное количество раз с помощью трёх выражений: инициализация, условие и обновление. Используйте его, когда нужен индекс: чтобы обращаться к позициям массива, сравнивать соседние элементы или считать итерации. В отличие от forEach и for...of, классический for statement в JavaScript даёт прямой контроль над начальным, конечным значением и шагом.

Пример цикла for в JavaScript для обхода массива

Вывод:

Результат появится здесь...

Вывод:

Шаг 0: сборка
Шаг 1: тест
Шаг 2: деплой

Как работает этот пример

  1. let i = 0 создаёт счётчик с блочной областью видимости, начиная с первого индекса массива.
  2. i < tasks.length проверяет условие перед каждой итерацией: цикл останавливается, когда i достигает tasks.length, что предотвращает выход за границы массива.
  3. i++ увеличивает счётчик после завершения тела каждой итерации.
  4. tasks[i] читает элемент на позиции i, связывая каждое значение с его индексом.

Граница < length (а не <=) считается стандартным шаблоном, потому что индексы массива идут от 0 до length - 1.

Частые ошибки в циклах for JavaScript

Ошибка на один индекс из-за <=

Неправильно:

const items = ["a", "b", "c"];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i]);
}

Правильно:

const items = ["a", "b", "c"];
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

<= выполняет одну лишнюю итерацию, поэтому items[items.length] равно undefined.

Использование var в асинхронных колбэках

Неправильно:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// вывод: 3, 3, 3

Правильно:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// вывод: 0, 1, 2

var имеет область видимости функции, поэтому колбэки читают финальное значение i. let создаёт новую привязку на каждой итерации.

Цикл for vs for…of

Используйте for, когда…Используйте for...of, когда…
Нужен индекс для вычислений, срезов или сравнения соседних элементов.Нужны только значения, а не их позиции.
Нужно пропускать элементы или идти с шагом больше единицы (i += 2).Перебираете любой итерируемый объект (массивы, строки, Map, генераторы).
Нужен break с условием, зависящим от индекса.Важнее читаемый перебор значений, чем доступ к индексу.

По умолчанию удобнее for...of; переходите к классическому for, когда нужен индекс или не последовательный шаг.

Больше примеров

Ранний выход через break:

const temps = [22, 18, 35, 29];
for (let i = 0; i < temps.length; i++) {
  if (temps[i] > 30) {
    console.log("Первый жаркий день на индексе", i);
    break;
  }
}

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

Пропуск итераций через continue:

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
// вывод: 0, 1, 3, 4

continue пропускает оставшуюся часть текущей итерации, но выражение обновления (i++) всё равно выполняется до следующей проверки условия.

Частые вопросы

Какой синтаксис у цикла for в JavaScript?

for statement в JavaScript содержит три необязательных выражения: for (init; condition; update). init выполняется один раз перед стартом цикла, condition проверяется перед каждой итерацией, а update выполняется после тела цикла. Все три части можно опустить, но без условия цикл становится бесконечным и его нужно завершать через break.

JavaScript while for loop: когда использовать что?

Используйте цикл for, когда инициализация, условие и обновление связаны с одним счётчиком: так границы цикла видны сразу. Используйте while, когда условие выхода зависит от внешнего состояния или когда инициализацию и обновление логичнее держать в теле цикла, а не в заголовке.

Как остановить цикл for в JavaScript раньше?

Поместите break внутри тела цикла. Когда интерпретатор доходит до break, он сразу выходит из цикла и продолжает выполнение после закрывающей фигурной скобки. Сочетайте break с условием, чтобы завершать поиск при первом найденном значении и не делать лишние итерации.