Циклы в JavaScript: полный гид для разработчиков

while (condition) {
  // Код, выполняемый при истинности условия
}

let counter = 0;
while (counter < 5) {
  console.log(`Текущее значение: ${counter}`);
  counter++;
}

Этот код выведет числа от 0 до 4. Важно следить, чтобы условие менялось внутри цикла, иначе можно столкнуться с бесконечным выполнением.

do {
  // Выполняемый код
} while (condition);

let userInput;
do {
  userInput = prompt('Введите число больше 10:');
} while (userInput <= 10);
console.log(`Вы ввели: ${userInput}`);

Этот цикл будет запрашивать число, пока пользователь не введет значение больше 10.

for (initialization; condition; increment) {
  // Тело цикла
}

let evenNumbers = [];
for (let num = 0; num < 20; num += 2) {
  evenNumbers.push(num);
}
console.log(evenNumbers); // [0, 2, 4, …, 18]

Такой подход удобен для работы с последовательностями и индексами.

let multiplicationTable = [];
for (let row = 1; row <= 5; row++) {
  let currentRow = [];
  for (let col = 1; col <= 5; col++) {
    currentRow.push(row * col);
  }
  multiplicationTable.push(currentRow);
}
console.table(multiplicationTable);

Каждый внешний цикл создает строку, а внутренний заполняет ее значениями.

let products = ['яблоко', 'груша', 'банан'];
for (let index = 0; index < products.length; index++) {
  products[index] = `Фрукт: ${products[index]}`;
}
console.log(products); // ['Фрукт: яблоко', 'Фрукт: груша', 'Фрукт: банан']

Для упрощения перебора существует цикл for…of.

for (let element of iterable) {
  // Работа со значением element
}

let prices = [100, 200, 300];
let total = 0;
for (let price of prices) {
  total += price;
}
console.log(`Общая сумма: ${total}`); // 600

Этот цикл не позволяет напрямую изменять исходный массив, но удобен для чтения данных.

let car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2022
};
for (let key in car) {
  console.log(`${key}: ${car[key]}`);
}

Вывод:

brand: Toyota
model: Camry
year: 2022

Для массивов for…in не рекомендуется, так как он перебирает индексы, а не значения, и порядок может быть нарушен.

Доступные методы

1. Object.keys() — возвращает массив ключей.
2. Object.values() — возвращает массив значений.
3. Object.entries() — возвращает массив пар [ключ, значение].

let user = { name: 'Анна', age: 28, city: 'Москва' };
for (let [key, value] of Object.entries(user)) {
  console.log(`Свойство ${key} = ${value}`);
}

Такой подход сочетает преимущества объектов и методов массивов.

1. break — немедленно завершает выполнение цикла.
2. continue — пропускает текущую итерацию и переходит к следующей.

let numbers = [3, 7, 10, 15, 20];
for (let num of numbers) {
  if (num > 12) {
    console.log(`Первое число больше 12: ${num}`);
    break;
  }
}

А continue полезен для пропуска определенных значений:

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue;
  console.log(`Нечетное число: ${i}`);
}

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}`);
  }
}

Этот код прекратит выполнение обоих циклов, когда i и j равны 1.

array.forEach(callbackFunction);

let colors = ['красный', 'зеленый', 'синий'];
colors.forEach(function(color) {
  console.log(`Цвет: ${color}`);
});

Этот код последовательно выведет все три цвета массива. Особенность метода в том, что он всегда проходит по всем элементам массива и не может быть прерван досрочно с помощью оператора break.

Циклы в JavaScript — мощный инструмент для обработки данных и автоматизации задач. Выбор типа цикла зависит от конкретной ситуации:

• while — для условий с неизвестным количеством итераций.
• do…while — когда выполнение нужно гарантировать.
• for — для работы с индексами и известным числом повторов.
• for…of — для перебора значений массивов.
• for…in — для перебора свойств объектов.

Комбинируя циклы с break, continue и метками, можно создавать эффективные и читаемые алгоритмы.

Хотите стать профессионалом в JavaScript? Запишитесь на наш интенсивный онлайн-курс «JavaScript с нуля до профи» — от теории до реальных проектов. А если нужен готовый работающий сайт — наша веб-студия создаст его для вас с применением современных технологий и лучших практик.