Как объявить цикл?

Циклы в JavaScript

В JavaScript существует несколько способов создания циклов, каждый из которых имеет свои особенности и область применения.

1. For цикл (классический)

Традиционный способ, который даёт полный контроль над итерацией:

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

// С шагом 2
for (let i = 0; i < 10; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8
}

// Уменьшение
for (let i = 5; i > 0; i--) {
  console.log(i); // 5, 4, 3, 2, 1
}

2. While цикл

Повторяет блок пока условие истинно:

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

// Бесконечный цикл (используй с осторожностью)
while (true) {
  // выполняется до break
  if (someCondition) break;
}

3. Do-While цикл

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

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);
// Блок выполнится хотя бы один раз

4. For-In цикл

Итерирует по ключам объекта:

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

for (const key in user) {
  console.log(key, user[key]);
  // name Иван
  // age 30
  // city Москва
}

// Для массивов (не рекомендуется - может итерировать прототипные свойства)
const arr = ["a", "b", "c"];
for (const index in arr) {
  console.log(index); // "0", "1", "2" (строки, не числа)
}

5. For-Of цикл (современный)

Итерирует по значениям (для массивов, строк, Set, Map):

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // 10, 20, 30
}

const str = "привет";
for (const char of str) {
  console.log(char); // п, р, и, в, е, т
}

// С индексом через entries()
for (const [index, value] of arr.entries()) {
  console.log(index, value); // 0 10, 1 20, 2 30
}

6. Array методы (функциональный стиль)

В современном JavaScript циклы часто заменяются методами массива:

const arr = [1, 2, 3, 4, 5];

// forEach - просто итерация
arr.forEach((value, index) => {
  console.log(index, value);
});

// map - преобразование значений
const doubled = arr.map(x => x * 2); // [2, 4, 6, 8, 10]

// filter - фильтрация
const evens = arr.filter(x => x % 2 === 0); // [2, 4]

// reduce - агрегация
const sum = arr.reduce((acc, x) => acc + x, 0); // 15

// find - поиск элемента
const found = arr.find(x => x > 3); // 4

// some/every - проверка условия
const hasEven = arr.some(x => x % 2 === 0); // true
const allPositive = arr.every(x => x > 0); // true

7. Break и Continue

Управление потоком цикла:

for (let i = 0; i < 10; i++) {
  if (i === 2) continue; // пропустить итерацию
  if (i === 7) break; // выход из цикла
  console.log(i);
}
// Выведет: 0, 1, 3, 4, 5, 6

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

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

Сравнение и лучшие практики

• For цикл: для точного контроля итераций
• While: когда условие сложнее, чем счётчик
• For-Of: предпочтительно для массивов в современном коде
• Методы массива (map, filter, reduce): функциональный стиль, безопаснее
• Избегай for-in для массивов

В React и современном JavaScript рекомендуется использовать методы массива вместо классических циклов где это возможно.