Какие виды циклов в JavaScript вы знаете, и в чем их отличия?

Быстрый ответ

В JavaScript существует несколько видов циклов для выполнения повторяющихся действий:

• for: Лучше всего подходит, когда количество итераций известно заранее. Имеет три выражения: инициализация, условие и инкремент.
• while: Выполняет код, пока условие истинно. Условие проверяется до выполнения тела цикла.
• do...while: Похож на while, но гарантирует выполнение тела цикла хотя бы один раз, так как условие проверяется после итерации.
• for...in: Перебирает ключи (свойства) объекта. Не рекомендуется для массивов.
• for...of: Перебирает значения итерируемых объектов, таких как массивы, строки, Map, Set. Это современный и предпочтительный способ итерации по массивам.

Подробный разбор циклов

1. Цикл for

Классический цикл, идеально подходящий для ситуаций, когда число итераций известно.

Синтаксис:

for (инициализация; условие; инкремент) {
  // тело цикла
}

• Инициализация: Выполняется один раз перед началом цикла (например, let i = 0).
• Условие: Проверяется перед каждой итерацией. Если true, цикл продолжается.
• Инкремент: Выполняется после каждой итерации (например, i++).

Пример:

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

2. Цикл while

Используется, когда количество итераций заранее неизвестно, и цикл должен продолжаться, пока выполняется определённое условие.

Синтаксис:

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

Пример:

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

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

3. Цикл do...while

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

Синтаксис:

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

Пример:

let i = 5;
do {
  console.log(i); // 5
  i++;
} while (i < 5);

В этом примере тело цикла выполнится один раз, хотя условие i < 5 изначально ложно.

4. Цикл for...in

Создан для перебора перечисляемых свойств объекта.

Синтаксис:

for (let key in object) {
  // тело цикла
}

Пример:

const user = {
  name: "Алиса",
  age: 30,
  isAdmin: true
};
 
for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}
// Вывод:
// name: Алиса
// age: 30
// isAdmin: true

Особенности:

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

5. Цикл for...of

Современный стандарт для перебора итерируемых объектов (массивы, строки, Map, Set и т.д.).

Синтаксис:

for (let value of iterable) {
  // тело цикла
}

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

const fruits = ["Яблоко", "Банан", "Вишня"];
for (let fruit of fruits) {
  console.log(fruit);
}
// Вывод:
// Яблоко
// Банан
// Вишня

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

const greeting = "Привет";
for (let char of greeting) {
  console.log(char);
}
// Вывод:
// П
// р
// и
// в
// е
// т

Сводная таблица отличий