Главная2 курс UX/UI7 занятие. Основы JS: циклы2. Виды циклов в JavaScript
7 занятие

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

Цикл for

Синтаксис:

for (начало; условие; шаг) {
  // тело цикла - выполняется каждый раз, когда условие истинно
}

Простой пример:

// Выводим числа от 1 до 5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// Результат: 1, 2, 3, 4, 5

Разберем по частям:

  • let i = 1 - начало: создаем переменную-счетчик (выполняется 1 раз)
  • i <= 5 - условие: проверяем перед каждой итерацией (повторением)
  • i++ - шаг: выполняем после каждой итерации (увеличиваем счетчик на 1)
  • console.log(i) - тело цикла: код, который выполняется в каждой итерации

Визуализация выполнения:

1. i = 1 → i <= 5? ДА → console.log(1) → i++ → i = 2
2. i = 2 → i <= 5? ДА → console.log(2) → i++ → i = 3
3. i = 3 → i <= 5? ДА → console.log(3) → i++ → i = 4
4. i = 4 → i <= 5? ДА → console.log(4) → i++ → i = 5
5. i = 5 → i <= 5? ДА → console.log(5) → i++ → i = 6
6. i = 6 → i <= 5? НЕТ → ЦИКЛ ЗАВЕРШЕН

Цикл while - пока условие истинно

Синтаксис:

while (условие) {
  // тело цикла
}

Пример:

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}
// Результат: 1, 2, 3, 4, 5

Важно: В цикле while нужно самостоятельно изменять переменную, иначе цикл может стать бесконечным!

Цикл do...while - выполнить хотя бы один раз

Синтаксис:

do {
  // тело цикла
} while (условие);

Пример:

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);
// Результат: 1, 2, 3, 4, 5

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

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

Цикл for...in - для перебора свойств объектов

Синтаксис:

for (ключ in объект) {
  // тело цикла
}

Пример:

const person = {
  name: "Анна",
  age: 25,
  city: "Москва"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
// Результат:
// name: Анна
// age: 25
// city: Москва

Цикл for...of - для перебора элементов массивов, строк и других итерируемых объектов

Синтаксис:

for (элемент of коллекция) {
  // тело цикла
}

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

const colors = ["красный", "зеленый", "синий"];

for (let color of colors) {
  console.log(color);
}
// Результат: красный, зеленый, синий

Пример со строкой:

const text = "Привет";

for (let char of text) {
  console.log(char);
}
// Результат: П, р, и, в, е, т
Далее