Цикл for и перебор коллекций

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

В круглых скобках for живут три части, разделённые точкой с запятой: счётчик (выполняется один раз перед стартом), условие (проверяется перед каждым проходом) и шаг (выполняется после каждого прохода). Пока условие истинно, тело повторяется.

js

for (let i = 0; i < 3; i++) {
  console.log(i);
}

Сначала предположите, что выведет код

Порядок такой: let i = 0 → проверка i < 3 → тело → i++ → снова проверка. Как только условие даёт false, цикл заканчивается и выполнение идёт дальше. Переменную i видно только внутри цикла — она объявлена через let прямо в заголовке.

js

let sum = 0;
for (let i = 1; i <= 4; i++) {
  sum += i;
}
console.log(sum);

Сначала предположите, что выведет код

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

for..of проходит по значениям коллекции и отдаёт их по одному. Никаких i, никакой длины, никакой возможности промахнуться мимо границы массива.

js

const fruits = ["яблоко", "груша", "слива"];
for (const fruit of fruits) {
  console.log(fruit);
}

Сначала предположите, что выведет код

Переменную объявляют через const: на каждой итерации она создаётся заново, так что переприсваивать её обычно не нужно. Работает for..of не только с массивами — строка тоже перебирается посимвольно, и Map с Set тоже умеют.

js

for (const letter of "код") {
  console.log(letter);
}

Сначала предположите, что выведет код

У массива есть метод entries() — он выдаёт пары «индекс, значение». Пару удобно сразу разобрать по переменным в квадратных скобках, это называется деструктуризацией.

js

const menu = ["суп", "салат"];
for (const [i, dish] of menu.entries()) {
  console.log(i, dish);
}

Сначала предположите, что выведет код

for..in перебирает ключи объекта. Значение достают уже вручную — через квадратные скобки, потому что имя свойства лежит в переменной.

js

const user = { name: "Аня", age: 25 };
for (const key in user) {
  console.log(key, user[key]);
}

Сначала предположите, что выведет код

Для массивов for..in формально работает, но это ловушка. Во-первых, ключи приходят строками: "0", а не 0. Во-вторых, он выдаёт все перечислимые свойства, а не только элементы — если кто-то добавил массиву обычное свойство, оно тоже попадёт в перебор.

js

const arr = ["a", "b"];
arr.note = "заметка";
for (const key in arr) {
  console.log(key, typeof key);
}

Сначала предположите, что выведет код

in — ключи, of — значения. Два слова, а сколько сэкономленных часов.

Тело цикла — обычный код, значит внутри может стоять ещё один цикл. Внешний делает один шаг — внутренний успевает пройти целиком. Отсюда простое правило подсчёта: два цикла по три шага дают девять повторений тела.

js

for (let i = 1; i <= 2; i++) {
  for (let j = 1; j <= 2; j++) {
    console.log(i + "x" + j + "=" + i * j);
  }
}

Сначала предположите, что выведет код

Чаще всего вложенность нужна для «массива массивов» — таблицы, игрового поля, матрицы. Внешний цикл идёт по строкам, внутренний — по ячейкам строки.

js

const matrix = [[1, 2], [3, 4]];
for (const row of matrix) {
  for (const cell of row) {
    console.log(cell);
  }
}

Сначала предположите, что выведет код

Обычный break прерывает только тот цикл, в котором стоит. Чтобы выпрыгнуть из обоих, циклу дают метку — имя с двоеточием — и пишут break имя. Метки, а вместе с ними break и continue целиком, разбирает статья «break и continue: управление циклом».

js

outer: for (const a of [1, 2]) {
  for (const b of [10, 20]) {
    if (a * b === 20) break outer;
    console.log(a, b);
  }
}

Сначала предположите, что выведет код

Кроме циклов у массива есть метод forEach: он сам зовёт вашу функцию для каждого элемента и передаёт в неё значение и индекс. Выглядит компактно и хорошо читается.

js

const prices = [100, 200, 300];
prices.forEach((price, i) => {
  console.log(i, price);
});

Сначала предположите, что выведет код

У forEach есть цена: из него нельзя выйти досрочно. break там — синтаксическая ошибка, а return завершает лишь текущий вызов функции. Нужен ранний выход — берите for..of.

js

const nums = [1, 5, 9, 13];
for (const n of nums) {
  if (n > 8) break;
  console.log(n);
}

Сначала предположите, что выведет код

Способ	Что в руках	Можно break
for (let i = 0; ...)	индекс i	да
for..of	значение	да
for..in	ключ, всегда строка	да
forEach	значение и индекс	нет

Практический выбор простой: перебираете значения массива — for..of; нужен хитрый шаг или номер — классический for; идёте по свойствам объекта — for..in.

Классический for(;;) состоит из счётчика, условия и шага; берите его, когда нужен номер итерации или нестандартный шаг.
for..of отдаёт значения массива, строки, Map или Set — самый частый выбор для перебора коллекции.
for..in перебирает ключи объекта; для массивов он опасен: ключи приходят строками и попадают лишние свойства.
Вложенные циклы проходят «таблицу»: внешний идёт по строкам, внутренний — по ячейкам; выйти сразу из обоих помогает метка и break имя.
forEach читается компактно, но прерваться в нём нельзя — там, где нужен break, используйте for..of.

1/3Что выведет этот код?
const arr = ["a", "b"]; for (const x in arr) console.log(x);

2/3Сколько раз выполнится тело цикла for (let i = 10; i > 7; i--)?

3/3Из какого перебора нельзя выйти досрочно через break?

Сумма чётных чисел

Дан массив чисел. Посчитайте сумму только чётных элементов и выведите её. Чётность проверяется остатком от деления: n % 2 === 0.

js

const nums = [3, 8, 1, 10, 7];
let sum = 0;
// ваш цикл здесь
console.log(sum); // должно получиться 18

Сначала предположите, что выведет код

Индексы здесь не нужны — достаточно значений, поэтому берём for..of и прибавляем к сумме только те числа, у которых остаток от деления на 2 равен нулю.

jsлистинг · не запускается

const nums = [3, 8, 1, 10, 7];
let sum = 0;
for (const n of nums) {
  if (n % 2 === 0) sum += n;
}
console.log(sum); // 18

const nums = [3, 8, 1, 10, 7];
let sum = 0;
for (const n of nums) {
  if (n % 2 === 0) sum += n;
}
console.log(sum); // 18

Считаются 8 и 10, вместе они дают 18. Через классический for вышло бы столько же строк, но пришлось бы писать nums[i] и следить за границей массива.

Таблица умножения 3×3

С помощью вложенных циклов выведите три строки таблицы умножения: в каждой — числа от i * 1 до i * 3, склеенные через пробел. Ниже показан ожидаемый вывод.

js

console.log("1 2 3"); // строка для i = 1
console.log("2 4 6"); // строка для i = 2
console.log("3 6 9"); // строка для i = 3

Сначала предположите, что выведет код

Внешний цикл отвечает за номер строки, внутренний собирает её содержимое в текстовую переменную. Печатаем строку после того, как внутренний цикл закончил работу.

jsлистинг · не запускается

for (let i = 1; i <= 3; i++) {
  let row = "";
  for (let j = 1; j <= 3; j++) {
    row += i * j + " ";
  }
  console.log(row.trim()); // 1 2 3, потом 2 4 6, потом 3 6 9
}

for (let i = 1; i <= 3; i++) {
  let row = "";
  for (let j = 1; j <= 3; j++) {
    row += i * j + " ";
  }
  console.log(row.trim()); // 1 2 3, потом 2 4 6, потом 3 6 9
}

Метод trim() убирает лишний пробел в конце. Важная деталь: let row объявлена внутри внешнего цикла — если вынести объявление наружу, все строки склеятся в одну длинную.

Цикл for и перебор коллекций

Видеоразбор темы за 5–7 минут

Классический for(;;)счётчик, условие и шаг

for..ofкогда нужны только значения

for..inключи объекта и подводный камень

Вложенные циклыцикл внутри цикла без паники

Перебор массива: чем и когдаforEach, break и выбор инструмента

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Сумма чётных чисел

Таблица умножения 3×3