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

🔄 Зачем нужны циклы?

Представьте: вам нужно вывести числа от 1 до 100 или обработать каждый элемент массива. Писать console.log(1), console.log(2) и так далее — муторно! Циклы автоматизируют повторяющиеся действия.

💡 Фишка: Циклы экономят время, делают код чище и позволяют работать с динамическими данными (когда их количество заранее неизвестно).

1. Цикл for — классика жанра

Синтаксис:

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

Пример: Выведем чётные числа от 2 до 10:

for (let i = 2; i <= 10; i += 2) {
  console.log(i); // 2, 4, 6, 8, 10
}

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

🔥 Важно: for идеален, когда известно количество повторений.

2. Цикл while — делаем, пока условие истинно

Синтаксис:

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

Пример: Угадываем число от 1 до 5:

let number = 1;
while (number <= 5) {
  console.log(`Попытка ${number}`);
  number++;
}

Выведет:

Попытка 1
Попытка 2
...
Попытка 5

🚨 Осторожно: Если условие всегда true, цикл станет бесконечным! Проверяйте, чтобы оно менялось.

3. Цикл do...while — сначала действие, потом проверка

Отличается от while тем, что тело выполнится хотя бы один раз, даже если условие ложно.

Синтаксис:

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

Пример: Запрос пароля:

let password;
do {
  password = prompt('Введите пароль:', '');
} while (password !== '12345');

Пользователь получит запрос, пока не введёт 12345.

4. Цикл for...in — путешествие по свойствам объекта

Нужен для перебора свойств объекта.

Синтаксис:

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

Пример: Выведем все свойства пользователя:

const user = { name: 'Данила', age: 30, isAdmin: true };
for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}

Результат:

name: Данила
age: 30
isAdmin: true

⚠️ Запомните: for...in не гарантирует порядок перебора свойств (особенно в старых браузерах).

5. Цикл for...of — для массивов и не только

Перебирает значения итерируемых объектов (массивы, строки, Map, Set и др.).

Синтаксис:

for (значение of итерируемыйОбъект) {
  // тело цикла
}

Пример: Суммируем элементы массива:

const numbers = [10, 20, 30];
let sum = 0;
for (let num of numbers) {
  sum += num;
}
console.log(sum); // 60

🌟 Плюс: for...of работает с любыми итерируемыми объектами, включая DOM-коллекции.

🏆 Когда какой цикл использовать?

💡 Продвинутые фишки

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

• break — полностью выходит из цикла.
• continue — пропускает текущую итерацию.

Пример с break:

for (let i = 0; i < 10; i++) {
  if (i === 5) break; // цикл остановится на 5
  console.log(i);     // 0, 1, 2, 3, 4
}

Метки для вложенных циклов

Позволяют выйти из нескольких циклов сразу:

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

🛠️ Практика — сделай сам!

Задача: Напишите цикл, который выводит в консоль числа от 100 до 0 с шагом 10.
Подсказка: Подойдёт for или while.

for (let i = 100; i >= 0; i -= 10) {
  console.log(i);
}

🎯 Итоги

• Циклы — мощный инструмент для работы с повторяющимися операциями.
• Выбирайте цикл в зависимости от задачи: for для точного контроля, while для гибкости, for...of для массивов.
• Используйте break и continue для управления потоком выполнения.

Теперь — в бой! Пишите код, экспериментируйте, и пусть циклы работают на вас. 🚀