Привет! Я — Александр Дудукало, автор базового курса по JavaScript. В прошлой статье мы разобрали работу с объектами в JavaScript, а сегодня поговорим о циклах.

Представьте, что нужно написать «Привет» ста друзьям подряд. Руки быстро устанут набирать одно и то же сообщение, а вот компьютер легко справится с таким заданием. Для этого существуют циклы — они позволяют выполнять повторяющиеся действия автоматически.

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

Как устроены циклы

Обычно люди не очень любят повторять одно и то же действие много раз подряд — после десятого раза начинает надоедать. Однако компьютеры просто обожают циклически выполнять одни и те же действия. 

Например, нам нужно вывести в консоли одинаковую строку десять раз подряд (не спрашивайте зачем).

console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
Результат в консоли.
Результат в консоли.

Да, это просто десять одинаковых строк. А что если их нужно не 10, а 100? А если тысяча или даже десять тысяч? Писать их вручную точно никому не понравится. Для таких задач существует один из самых популярных циклов — for.

for (let i = 0; i < 10; i++) {
 console.log('Hello, world!');
}

Результат в консоли тот же, но код занимает всего три строки.

Синтаксис цикла for состоит из трех частей в круглых скобках.

  • Инициализация — let i = 0. Создается переменная-счетчик i, которая обычно начинает с нуля.

  • Условие — i < 10. Пока условие истинно, цикл будет выполняться. Как только i станет равно 10, цикл остановится.

  • Шаг — i++. После каждого повторения к переменной i прибавляется единица.

То, что написано в фигурных скобках { ... }, называется телом цикла. Именно этот код выполняется многократно.

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

for (let i = 0; i < 10; i++) console.log(`Итерация ${i + 1}`);

В программировании переменные-счетчики обычно называют i (от слова index). Иногда используют j, k и так далее, если циклов несколько. Но вы можете придумать любое название переменной. 

Теперь перейдем к определениям.

Цикл — это конструкция, которая выполняет один и тот же код многократно. Каждое повторение цикла называется итерацией.

Итерация — это выполнение тела цикла.

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

for (let i = 0; i < 10; i++) {
 console.log(`Итерация ${i + 1}`);
}
Результат в консоли.
Результат в консоли.

Здесь мы пишем i + 1, потому что счетчик i начинается с нуля, а людям привычнее считать с единицы.

Цикл легко подстраивать под разные задачи. Например, вы можете менять стартовое и конечное значение, настраивая их в счетчике и условии:

for (let i = 3; i < 7; i++) {
 console.log(`Итерация ${i + 1}`);
}
Результат в консоли.
Результат в консоли.

При необходимости можно создать цикл с обратным отсчетом, чтобы значение i менялось в обратную сторону:

for (let i = 7; i  > 0; i--) {
 console.log(`Итерация ${i }`);
}
Результат в консоли.
Результат в консоли.

И еще один пример, в котором меняется шаг изменения значения i. Это тоже может пригодиться:

for (let i = 0; i <= 10; i += 2) {
 console.log(`Значение в i: ${i}`);
}
Результат в консоли.
Результат в консоли.

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

Кстати, работой цикла можно управлять прямо во время его выполнения. Об этом я расскажу дальше.

30+ бесплатных курсов на IT-темы в Академии Selectel

Для начинающих и опытных специалистов.

Изучить →

Управление циклом

Сразу к делу. Цикл можно останавливать полностью или же прерывать только текущую операцию. Иногда это бывает полезно. Например, вы ищете конкретное значение в длинном списке. Как только оно найдется, не будет смысла продолжать перебор. Или наоборот: у вас есть цикл, который проверяет элементы, но некоторые из них вам неинтересны, поэтому их можно просто пропустить.

Завершение работы цикла

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

for (let i = 1; i <= 100; i++) {
 const randomNumber = Math.floor(Math.random() * 10) + 1;
 console.log(`Попытка ${i}: выпало число ${randomNumber}`);


 if (randomNumber === 7) {
   console.log('Ура! Выпало число 7. Останавливаем цикл!');
   break; // прерываем цикл
 }
}

В приведенном примере цикл будет полностью остановлен, когда случайное число окажется равным 7. Даже если в условии стоит i <= 100, до конца цикл уже не дойдет.

Завершение текущей итерации

continue — это оператор, который завершает текущую итерацию цикла и сразу переходит к следующей. В отличие от break, он не останавливает весь цикл.

for (let i = 1; i <= 10; i++) {
 if (i % 2 === 0) {
   continue; // если число чётное - пропускаем
 }
 console.log(`Нечётное число: ${i}`);
}

В приведенном примере цикл пропустит все четные числа. Если i делится на два без остатка, срабатывает continue, и цикл сразу переходит к следующему шагу. При этом важно, что цикл не останавливается полностью.

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

Цикл while

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

while — это цикл, который выполняет тело до тех пор, пока указанное условие остается истинным (true). Как только условие становится ложным (false), цикл останавливается.

let password = '';


while (password !== '1234') {
 password = prompt('Введите пароль (подсказка: 1234)');
}


alert('Добро пожаловать!');
Результат в браузере.
Результат в браузере.
Результат в браузере.
Результат в браузере.

Появляется окно prompt, в котором нужно ввести пароль. Если ввести что-то не то, цикл продолжит спрашивать пароль. Как только пользователь введет строку «1234», условие password !== '1234' станет ложным, и цикл остановится. После этого появится соответствующее сообщение.

Как работает while.

  1. Проверяется условие, указанное в круглых скобках.

  2. Если условие истинно, то выполняется тело цикла.

  3. После выполнения снова проверяется условие.

  4. Цикл повторяется до тех пор, пока условие остается истинным.

Таким образом, количество повторений заранее неизвестно, и цикл крутится, пока выполняется условие.

Кстати, while можно прерывать с помощью break, как и текущую итерацию, использовав continue.

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

while (true) {
 console.log('Это будет повторяться бесконечно!');
}

Цикл do...while

Цикл do…while, очень похож на while кроме одного важного нюанса: while сначала проверяет условие, а потом выполняет тело цикла. А do...while работает наоборот — сначала выполняет тело, а уже потом проверяет условие.

do...while — это цикл, который выполняет тело хотя бы один раз, а затем продолжает выполнение до тех пор, пока условие остается истинным (true).

let randomNumber = 0;


do {
 randomNumber = Math.floor(Math.random() * 6) + 1; // случайное число от 1 до 6
 console.log(`Выпало: ${randomNumber}`);
} while (randomNumber !== 6);


console.log('Ура! Выпала шестерка!');
Результат в консоли.
Результат в консоли.

В примере мы генерируем случайное число от 1 до 6. Если выпала не шестерка, цикл повторяется. Как только выпадает 6, цикл останавливается. Главное — даже если с первой попытки выпадает нужное число, тело цикла все равно выполнится хотя бы один раз.

Принцип работы do...while.

  1. Выполняется тело цикла.

  2. Проверяется условие в скобках после while.

  3. Если условие истинно, то цикл запускается снова.

  4. Если условие ложно, цикл завершается.

Как и в случае while, если условие всегда истинно, цикл никогда не завершится. Это приведет к бесконечному повторению цикла, из-за которого могут зависнуть программа или браузер. И, конечно, операторы завершения доступны здесь, как и в других циклах.

Подведем итог

Мы познакомились с циклами for, while и do...while. Другие циклы — for...of, for...in и методы массивов удобнее рассматривать после изучения массивов.

Главное, что нужно запомнить: циклы позволяют автоматизировать повторяющиеся действия и делают код проще.

Увидимся в следующей статье.

Комментарии (0)