Циклы: while, do..while и for

Понадобилось вывести числа от 1 до 100 – копировать сто строк? Программы для того и существуют, чтобы повторять за нас. Цикл – это блок кода плюс правило «продолжать ли». Каждый повтор тела называют итерацией – или, по-русски, кругом; в уроке оба слова значат одно и то же, а «итерация» будет встречаться вам в документации и чужом коде постоянно.

Простейший – while: «пока условие истинно – выполняй тело». Как с посудой: пока в раковине есть тарелки – мой следующую. Условие проверяется перед каждым кругом.

Повторение без копипасты

Сто строк вывода – это не сто console.log.

while.jsjs

1let i = 1;23while (i <= 3) {4  console.log(i);5  // без этой строки цикл никогда не закончился бы6  i++;7}

Консоль

Круги while – по шагам

let i = 1;

Счётчик создан: i = 1.

while (i <= 3) {

console.log(i);

i++;

}

console.log("после цикла");

Счётчик создан: i = 1.

Проверка перед кругом: 1 <= 3 – истина, заходим в тело.

Тело печатает текущее i.

Шаг к концу: i становится 2.

Снова проверка: 2 <= 3 – истина, ещё круг.

Печатается 2.

i становится 3.

Проверка: 3 <= 3 – всё ещё истина.

Печатается 3.

i становится 4.

Проверка: 4 <= 3 – ложь. Цикл окончен, тело не выполняется.

Программа продолжается со строки после цикла.

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

У while есть брат do..while: он проверяет условие после тела, поэтому тело выполнится хотя бы один раз – «сначала попробуй, потом решай, пробовать ли ещё». Нужен редко, но метко.

do-while.jsjs

1do {2  console.log('хотя бы раз');3} while (false);

Консоль

хотя бы раз

Условие ложно с самого начала – но тело уже успело выполниться.

for: всё о цикле в одной строке

Весь план повторения – старт, граница, шаг – умещается в одной строке заголовка.

for.jsjs

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

Консоль

То же, что while выше, – но всё о счётчике собрано в заголовке.

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

Переменная из let i = 1 живёт только внутри цикла – снаружи её нет, и это хорошо: счётчик никому не мешает. Имя i – сокращение от index: так счётчик называют со времён первых языков программирования, и любой программист узнаёт его с одного взгляда. Во вложенных циклах берут следующие буквы алфавита – j, k.

Три части заголовка отвечают на вопросы: с чего начать, когда остановиться, как двигаться.

Части for в работе – по шагам

for (let i = 1; i <= 3; i++) {

Старт выполняется один раз: создаётся i = 1.

console.log(i);

}

Старт выполняется один раз: создаётся i = 1.

Условие перед кругом: на месте i – текущая 1; истина.

Тело печатает 1.

Шаг после круга: i становится 2.

Снова условие: 2 <= 3 – истина.

Тело печатает 2.

Шаг: i становится 3.

Условие: 3 <= 3 – истина.

Тело печатает 3.

Шаг: i становится 4.

Условие: 4 <= 3 – ложь. Цикл завершён; старт больше не выполнялся ни разу.

Когда что брать? for – когда число кругов известно заранее: пройти от 1 до 100, повторить ровно десять раз. while – когда заранее неизвестно, сколько повторять: крутите, пока условие не изменится. Есть счётчик – пишите for; есть только условие – while:

first-digit.jsjs

1let code = 7245;23while (code >= 10) {4  // отбрасываем последнюю цифру5  code = Math.floor(code / 10);6}7console.log(code);

Консоль

Первая цифра числа: сколько кругов – зависит от длины числа, заранее её не знаешь.

Части заголовка можно пропускать

Любую из трёх частей можно оставить пустой – но обе точки с запятой обязаны стоять на местах. Старт пропускают, когда счётчик уже создан раньше:

skip-start.jsjs

1let i = 1;23for (; i <= 3; i++) {4  console.log(i);5}

Консоль

Старт пуст – счётчик уже существует; его точка с запятой всё равно на месте.

Шаг оставляют пустым, когда переменную двигает само тело:

skip-step.jsjs

1for (let n = 1; n < 8; ) {2  n *= 2;  // переменную двигает тело3  console.log(n);4}

Консоль

Шаг пуст – удвоение происходит внутри тела цикла.

Пустыми могут быть и все три части сразу. Пустое условие считается истинным, так что for (;;) – намеренно бесконечный цикл, о них дальше:

forever.jsjs

1for (;;) {2  // тело выполняется без конца3}

Цикл без старта, условия и шага – обе точки с запятой по-прежнему обязательны.

break: досрочный выход

break немедленно выходит из цикла целиком: остаток тела не выполняется, новые круги не начинаются, программа продолжается со строки после цикла. Работает в любом цикле – while, do..while, for. Первая типичная ситуация – поиск: нашли подходящее, дальше перебирать бессмысленно:

search.jsjs

1const secret = 4;23for (let i = 1; i <= 10; i++) {4  if (i === secret) {5    console.log('найдено: ' + i);6    // дальше перебирать бессмысленно7    break;8  }9}

Консоль

найдено: 4

Без break цикл докрутил бы до десяти, хотя ответ найден на четвёртом круге.

Вторая ситуация – цикл, задуманный без конца: условие while (true) истинно всегда, и единственная дверь наружу – break:

countdown.jsjs

1let timer = 5;23while (true) {4  timer--;5  // единственная дверь наружу6  if (timer === 0) break;7}8console.log('старт!');

Консоль

старт!

continue: пропуск круга

continue мягче: он пропускает остаток текущего круга и переходит к следующему. Цикл не останавливается – просто один круг закончился досрочно. В for шаг при этом выполняется как обычно.

Главный сценарий – фильтрация: обработать только подходящие элементы. Условие с continue в начале тела читается как охранник на входе: «этот не подходит – следующий», а весь код ниже остаётся ровным, без лишней вложенности.

even-only.jsjs

1for (let i = 1; i <= 6; i++) {2  // нечётное – пропускаем круг3  if (i % 2 !== 0) continue;4  console.log(i);5}

Консоль

Охранник на входе: нечётные круги заканчиваются досрочно, чётные доходят до печати.

skip-one.jsjs

1for (let i = 1; i <= 4; i++) {2  // выпадает только тройка3  if (i === 3) continue;4  console.log(i);5}6console.log('готово');

Консоль

готово

Выпал только круг с тройкой – остальные дошли до печати, и цикл дожил до конца.

Бесконечные циклы

Цикл бесконечен, когда условие никогда не становится ложным. Чаще всего это ошибка: забыли i++, двинули не ту переменную или написали условие, которое не зависит от тела. Программа не падает – она молча работает без конца, и вкладка браузера виснет.

Но бесконечный цикл бывает и намеренным: while (true) или for (;;) пишут, когда число кругов заранее неизвестно, а из цикла выходят изнутри через уже знакомый break.

Бесконечный цикл: приём и ошибка

Намеренно бесконечный: выход через break

1let thickness = 0.1;  // лист бумаги, мм2let folds = 0;34while (true) {5  thickness *= 2;  // сложили пополам6  folds++;7  // толще человеческого роста8  if (thickness > 1700) break;9}10// 15 – а не «семь раз», как в известном мифе11console.log(folds);

Забытый шаг: цикл никогда не закончится

1let i = 1;2while (i <= 3) {3  // i не меняется – условие истинно всегда4  console.log(i);5}

// теперь вы знаете

while повторяет, пока условие истинно; do..while проверяет после тела
for – когда число кругов известно заранее; while – когда есть только условие
for собирает старт, условие и шаг в одной строке; любую часть можно оставить пустой
break выходит из цикла целиком – поиск и выход из бесконечных
continue пропускает остаток круга – фильтрация без вложенности
for (;;) и while (true) – намеренно бесконечные циклы с выходом через break
Бесконечный цикл по ошибке – условие, в котором ничего не меняется

Проверьте себя

Сколько строк напечатает код?

let n = 100;
do {
  console.log(n);
  n++;
} while (n < 10);

ни одной

одну

десять

бесконечно много

Проследите значения на каждом круге цикла.

let sum = 0;

for (let i = 1; i <= 3; i++) {

sum += i;

}

Шаг	`i`	`sum`
до цикла	–	0
круг 1
круг 2
круг 3

Правильная таблица

Шаг	i	sum
до цикла	–	0
круг 1	1	1
круг 2	2	3
круг 3	3	6

sum накапливает: 0+1=1, 1+2=3, 3+3=6. Переменная-накопитель рядом с циклом – самый частый узор в программировании, вы будете писать его тысячи раз.

Обратный отсчёт

Выведите числа от 5 до 1 в обратном порядке – по одному в строке.

// цикл от 5 вниз до 1

1for (let i = 5; i >= 1; i--) {2  console.log(i);3}4

Счётчик умеет ходить и вниз: старт с верхней границы, условие держит нижнюю, шаг – декремент.

Сколько строк напечатает цикл?

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

Цикл for (let i = 1; i <= 4; i++) печатает i, но круг с i === 2 пропускается через continue; после цикла печатается «готово». В каком порядке строки появятся в консоли?

2готово

Этажи без тринадцатого

В некоторых домах нет 13-го этажа. Выведите номера этажей с 10 по 15, пропустив 13 – его в этом доме не существует.

// цикл от 10 до 15; этаж 13 пропустите

1for (let i = 10; i <= 15; i++) {2  if (i === 13) continue;3  console.log(i);4}5

continue – охранник на входе: круг с тринадцатым закончился досрочно, остальные дошли до печати.

Что делает запись for (;;) { ... }?

синтаксическая ошибка

цикл не выполнится ни разу

намеренно бесконечный цикл

выполнит тело ровно один раз

Сколько раз делится

Число 243 делят на 3, пока оно делится нацело. Посчитайте циклом, сколько делений получится, и выведите ответ одной строкой.

let n = 243;
let count = 0;
// делите, пока n % 3 === 0, и считайте круги

console.log(count);

1let n = 243;2let count = 0;3while (n % 3 === 0) {4  n /= 3;5  count++;6}7console.log(count);8

243 – это 3 в пятой степени: пять делений, и в n осталась единица. Число кругов заранее неизвестно – работа для while.

Первый делитель

В переменной n – число 91. Найдите циклом его наименьший делитель больше 1 и выведите одной строкой. Как только делитель найден – выходите из цикла: перебирать дальше бессмысленно.

const n = 91;
let divisor = 0;
// цикл от 2 до n, break при первом делителе

console.log(divisor);

1const n = 91;2let divisor = 0;3for (let d = 2; d <= n; d++) {4  if (n % d === 0) {5    divisor = d;6    break;7  }8}9console.log(divisor);10

91 = 7 · 13, поэтому первый делитель – 7, и break остановил перебор на шестом круге. Узор «ищи и выходи» вы будете писать постоянно: без break цикл честно докрутил бы до 91 без всякой пользы.

Сумма века

Сложите все числа от 1 до 100 циклом и выведите результат одной строкой.

let sum = 0;
// цикл от 1 до 100

console.log(sum);

1let sum = 0;2for (let i = 1; i <= 100; i++) {3  sum += i;4}5console.log(sum);6

Накопитель плюс цикл – и 5050 готово. По легенде, юный Гаусс сосчитал это в уме, сложив 1+100, 2+99… – пятьдесят пар по 101. Ваша программа честно прошла все сто кругов за долю миллисекунды.

Предыдущий урокКороткие записи и порядок вычислений Следующий урок Массив и объект: первое знакомство

← → переключают уроки · не работают при фокусе в полях ввода