04. Циклы

Что такое цикл

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

Виды циклов в JavaScript

В JavaScript есть несколько видов циклов:
  • for — когда заранее известно, сколько раз нужно повторить действие.
  • while — пока условие истинно.
  • do...while — делает хотя бы одну итерацию, даже если условие ложно.

Цикл for

Синтаксис


for (начало; условие; шаг) {
  // тело цикла
}

Пример


for (let i = 1; i <= 5; i++) {
  console.log('Шаг номер ' + i);
}

Вывод в консоль: ``` Шаг номер 1 Шаг номер 2 Шаг номер 3 Шаг номер 4 Шаг номер 5 ```

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

  • i = 1 — начальное значение переменной.
  • i <= 5 — условие, при котором цикл продолжается.
  • i++ — шаг: увеличиваем i на 1 после каждой итерации.

Пример: таблица умножения


for (let i = 1; i <= 10; i++) {
  console.log(`5 x ${i} = ${5 * i}`);
}

Цикл while

Синтаксис


while (условие) {
  // код выполняется, пока условие true
}

Пример


let count = 1;
while (count <= 5) {
  console.log('Счётчик: ' + count);
  count++;
}

Этот цикл делает то же самое, что и for, но запись чуть длиннее.

Важно:

Если забыть изменить переменную в теле цикла, цикл может стать бесконечным и зависнуть.

Цикл do...while

Синтаксис


do {
  // выполняем код хотя бы один раз
} while (условие);

Пример


let number = 1;
do {
  console.log('Число: ' + number);
  number++;
} while (number <= 3);

Даже если условие изначально ложно, цикл выполнится хотя бы один раз.

Прерывание цикла

Иногда нужно выйти из цикла раньше. Для этого используется оператор break.

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // выход из цикла
  }
  console.log(i);
}

Вывод: 1, 2, 3, 4.

Пропуск итерации

Чтобы пропустить текущий шаг, используется continue. 

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // пропускаем 3
  }
  console.log(i);
}
Вывод: 1, 2, 4, 5.

Вложенные циклы

Пример: таблица умножения


for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

Мини-практика

  • Выведите все числа от 1 до 20, но вместо чисел, кратных 3, выводите слово «Fizz».
  • Посчитайте сумму чисел от 1 до 100.
  • Создайте цикл, который выводит только чётные числа до 20.

[h3]Пример решения</h3] 


let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log('Сумма чисел от 1 до 100:', sum);

Советы новичкам

  • Следите, чтобы условие цикла когда-нибудь стало ложным — иначе цикл не закончится.
  • Если не знаете, сколько раз повторять — используйте while.
  • Если знаете точное количество повторов — используйте for.
  • Не бойтесь экспериментировать — изменяйте шаг, условия и тело цикла.

Итоги урока

Теперь вы знаете:
  • Что такое циклы и зачем они нужны.
  • Как использовать for, while и do...while.
  • Как прерывать и пропускать итерации с помощью break и continue.
  • Как создавать вложенные циклы и решать практические задачи.
Следующий урок → Функции