JS циклы

Циклы в JavaScript — управляющие конструкции для многократного выполнения блока кода: for, while, do...while, for...of, for...in.

Зачем нужно

Циклы необходимы для обхода коллекций, повторения операций, реализации алгоритмов. Правильный выбор типа цикла делает код читаемым и производительным. for...of — современный способ обхода итерируемых объектов (массивы, строки, Map, Set), заменяет устаревший for...in для массивов. Понимание break, continue и меток важно для выхода из вложенных циклов.

Где используется

• Обход массивов и коллекций: рендер списков, трансформация данных
• Алгоритмы: сортировка, поиск, накопление результата
• Опрос условий: ожидание события, retry-логика
• Обход свойств объекта (for...in)
• Работа с генераторами и итерируемыми объектами (for...of)

Основной контент

for — классический цикл

// Базовый синтаксис: инициализация; условие; шаг
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// Обход массива по индексу
const fruits = ['яблоко', 'банан', 'вишня'];
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}

// Обратный обход
for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(fruits[i]); // вишня, банан, яблоко
}

for...of — обход итерируемых объектов

// Массив
for (const fruit of fruits) {
  console.log(fruit);
}

// С индексом через entries
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}

// Строка
for (const char of 'hello') {
  console.log(char); // 'h', 'e', 'l', 'l', 'o'
}

// Map
const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
  console.log(key, value);
}

// Set
const set = new Set([1, 2, 3]);
for (const val of set) {
  console.log(val);
}

for...in — обход свойств объекта

const user = { name: 'Иван', age: 30, city: 'Москва' };

// for...in перебирает ВСЕ перечисляемые свойства, включая унаследованные
for (const key in user) {
  if (Object.hasOwn(user, key)) { // только собственные свойства
    console.log(`${key}: ${user[key]}`);
  }
}

// Не используйте for...in для массивов — порядок не гарантирован,
// могут попасть добавленные через prototype свойства

while и do...while

// while — проверка условия ПЕРЕД итерацией
let count = 0;
while (count < 3) {
  console.log(count++); // 0, 1, 2
}

// do...while — проверка условия ПОСЛЕ итерации (выполняется хотя бы раз)
let input;
do {
  input = prompt('Введите число больше 0:');
} while (input <= 0);

// Retry-логика
async function fetchWithRetry(url, retries = 3) {
  let attempt = 0;
  while (attempt < retries) {
    try {
      return await fetch(url);
    } catch (err) {
      attempt++;
      if (attempt === retries) throw err;
    }
  }
}

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 === 0) continue;
  console.log(i); // 1, 3
}

// Метки — выход из вложенных циклов
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...in для массивов: порядок элементов не гарантирован стандартом (на практике обычно правильный, но не всегда), и могут попасть прототипные свойства. Используйте for...of или forEach.
• Бесконечный цикл: забыть обновить счётчик или условие всегда истинно — вкладка браузера зависает. Проверяйте условие выхода.
• Модификация массива в цикле: добавление/удаление элементов во время for по индексу ломает обход — итерируйте по копии или используйте filter/map.
• let vs var в for: var в цикле — одна переменная для всех итераций (проблема в setTimeout/Promise). Всегда используйте let.

Связанные темы

• _MOC JavaScript
• JS массивы основы
• JS Symbol и итераторы

Ресурсы

• MDN — for
• MDN — for...of
• javascript.info — Циклы
• doka.guide — Циклы

---

🎓 Источник: Итерирование, циклы и итераторы в JavaScript

• 📅 2018-11-05 · YouTube
• Тезисы: циклы — это императивный синтаксис. Итераторы (Symbol.iterator) — декларативный протокол. for...of работает через iterator protocol — поэтому работает с любым iterable (Map, Set, NodeList)

⚡ Источник: ⎡dlgs02⎦ JavaScript Беседы Reduce, For, Wasm · AsForJS

• 📅 2023-11-19 · YouTube
• Тезисы: обзорный диалог. for — самый прямой к байткоду цикл. for...of создаёт IteratorRecord — медленнее на простых массивах. forEach через callback — медленнее for в горячих местах

⚡ Источник: Производительность for, forEach и reduce · AsForJS

• 📅 2026-04-14 · YouTube
• Тезисы: замеры показывают: for(i=0;...) ≈ for...of (после JIT) > forEach > reduce. Разница важна только на >10⁵ элементах