JS Tower
JavaScript & TypeScriptМодуль 1: Базовый синтаксис

Циклы

Повторение действий с помощью for, while и других циклов

Цель урока

В этом уроке ты научишься:

  • Повторять код с помощью for и while
  • Перебирать массивы и объекты
  • Управлять циклом с помощью break и continue

Цикл for

Используется, когда известно количество повторений:

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

Структура:

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

Цикл while

Выполняется, пока условие истинно:

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}
// 0, 1, 2, 3, 4

Осторожно

Не забудь изменять переменную, иначе цикл будет бесконечным.


Цикл do...while

Выполняется минимум один раз:

let i = 10;

do {
  console.log(i);
  i++;
} while (i < 5);
// 10 (выполнится один раз)

Перебор массива

Классический for

let fruits = ["яблоко", "банан", "апельсин"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for...of (рекомендуется)

let fruits = ["яблоко", "банан", "апельсин"];

for (let fruit of fruits) {
  console.log(fruit);
}

Перебор объекта

for...in

let user = {
  name: "Иван",
  age: 25,
  city: "Москва"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}
// name: Иван
// age: 25
// city: Москва

break и continue

break — выход из цикла

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}
// 0, 1, 2, 3, 4

continue — пропуск итерации

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

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

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

break с меткой

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outer; // выход из обоих циклов
    }
    console.log(i, j);
  }
}

Сравнение циклов

ЦиклКогда использовать
forИзвестное количество итераций
whileНеизвестное количество, есть условие
do...whileМинимум одно выполнение
for...ofПеребор значений массива
for...inПеребор ключей объекта

Практика

Задание 1: Сумма чисел

Задача: Вычисли сумму чисел от 1 до 10.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
55

Задание 2: Перебор массива

Задача: Выведи все элементы массива.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
красный
зелёный
синий

Задание 3: Поиск элемента

Задача: Найди индекс числа 7 в массиве и выйди из цикла.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
2

Задание 4: Фильтрация

Задача: Выведи только чётные числа от 1 до 10.

Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
2
4
6
8
10

Проверь себя

  1. Чем for отличается от while?
  2. Когда использовать for...of vs for...in?
  3. Что делает break?
  4. Что делает continue?