логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
Циклы в JavaScript – всё о циклах while, for, do-while

Циклы в JavaScript – всё о циклах while, for, do-while

17 декабря 2024 г.
Автор

Виталий Котов

В JavaScript циклы используются для повторения блока кода.

Например, если нужно показать сообщение 100 раз, можно использовать цикл. Это всего лишь простой пример; с помощью циклов можно добиться гораздо большего.

Цикл for

Синтаксис цикла for следующий:

for (initialExpression; condition; updateExpression) {
  // тело цикла
}
  1. initialExpression инициализирует и/или объявляет переменные и выполняется только один раз.
  2. Оценивание condition (условие).
    • Если условие - false, цикл for завершается.
    • Если условие - true, выполняется блок кода внутри цикла for.
  3. Выражение updateExpression обновляет значение initialExpression, когда условие равно true.
  4. condition (условие) оценивается снова. Этот процесс продолжается до тех пор, пока условие не станет false.

Пример 1: Вывести текст пять раз

// программа для вывода текста на консоль 5 раз
const n = 5;

// цикл от i = 1 до 5
for (let i = 1; i <= n; i++) {
  console.log(`Я люблю JavaScript.`);
}

Вывод в консоль:

Я люблю JavaScript.
Я люблю JavaScript.
Я люблю JavaScript.
Я люблю JavaScript.
Я люблю JavaScript.

Цикл while

Синтаксис цикла while следующий:

while (condition) {
  // тело цикла
}
  1. Цикл while оценивает condition (условие) внутри круглой скобки ().
  2. Если condition оценивается как true, выполняется код внутри цикла while.
  3. condition оценивается снова.
  4. Этот процесс продолжается до тех пор, пока condition не станет false.
  5. Когда condition оценивается как false, цикл останавливается.

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

// программа для вывода чисел от 1 до 5
// объявление переменных
let i = 1;
let n = 5;

// цикл while от i = 1 до 5
while (i <= n) {
  console.log(i);
  i += 1;
}

Вывод в консоль:

1
2
3
4
5

Цикл do..while

Синтаксис цикла do...while следующий:

do {
  // тело цикла
} while (condition);
  1. Сначала выполняется тело цикла. Затем оценивается condition (условие).
  2. Если condition оценивается как true, тело цикла внутри оператора do выполняется снова.
  3. condition оценивается еще раз.
  4. Если condition оценивается как true, тело цикла внутри оператора do выполняется снова.
  5. Этот процесс продолжается до тех пор, пока condition не будет оценено как false. Тогда цикл останавливается.

Примечание:

Цикл do...while похож на цикл while. Единственное отличие заключается в том, что в цикле do...while тело цикла выполняется хотя бы один раз.

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

// программа для вывода чисел
let i = 1;
const n = 5;

// цикл do...while от 1 до 5
do {
  console.log(i);
  i++;
} while (i <= n);

Вывод в консоль:

1
2
3
4
5

Оператор break

Оператор break используется для немедленного завершения цикла при его обнаружении.

Синтаксис оператора break следующий:

break [label];

Примечание: label является необязательной и используется редко.

Пример 1: break с циклом for

// программа для вывода значения i
for (let i = 1; i <= 5; i++) {
  // условие с break
  if (i == 3) {
    break;
  }
  console.log(i);
}

Вывод в консоль:

1
2

В приведенной выше программе цикл for используется для вывода значения i на каждой итерации. Оператор break используется как:

if(i == 3) {
    break;
}

Это означает, что когда i равно 3, оператор break завершает цикл. Следовательно, вывод не содержит значений, больших или равных 3.

Пример 2: break с циклом while

// программа для нахождения суммы положительных чисел
// если пользователь вводит отрицательное число, break завершает процесс
// введенное отрицательное число не прибавляется к сумме

let sum = 0;
let number;

while (true) {
  // повторить ввод, если число положительное
  number = parseInt(prompt('Введите число: '));

  // условие с break
  if (number < 0) {
    break;
  }

  // сложение всех положительных чисел
  sum += number;
}

// вывод суммы
console.log(`Сумма: ${sum}.`);

Вывод в консоль:

Введите число: 1
Введите число: 2
Введите число: 3
Введите число: -5
Сумма: 6.

В приведенной выше программе пользователь вводит число. Цикл while используется для вывода общей суммы чисел, введенных пользователем.

Здесь оператор break используется как:

if(number < 0) {
    break;
}

Когда пользователь вводит отрицательное число, здесь -5, оператор break завершает цикл, и поток программы выходит за пределы цикла.

Таким образом, цикл while продолжается до тех пор, пока пользователь не введет отрицательное число.

break с вложенными циклами

Когда break используется внутри двух вложенных циклов, break завершает внутренний цикл. Например:

// вложенные циклы for

// первый цикл
for (let i = 1; i <= 3; i++) {
  // второй цикл
  for (let j = 1; j <= 3; j++) {
    if (i == 2) {
      break;
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

Вывод в консоль:

i = 1, j = 1
i = 1, j = 2
i = 1, j = 3
i = 3, j = 1
i = 3, j = 2
i = 3, j = 3

В приведенной выше программе, когда i == 2, выполняется оператор break. Он завершает внутренний цикл, и поток программы переходит к внешнему циклу.

Следовательно, значение i = 2 никогда не выводится в консоль.

break с меткой

При использовании вложенных циклов также можно завершить внешний цикл с помощью оператора label.

Однако breakс меткой редко используется в JavaScript, поскольку это делает код более трудным для чтения и понимания.

Оператор continue

Оператор continue используется для пропуска текущей итерации цикла, и поток управления программы переходит к следующей итерации.

Синтаксис оператора continue следующий:

continue [label];

Примечание: label является необязательной и используется редко.

continue с циклом for

В цикле for оператор continue пропускает текущую итерацию, а поток управления переходит к выражению updateExpression.

Выражение updateExpression обновляет значение initialExpression

for (initialExpression; condition; updateExpression) {
  // тело цикла
}

Пример 1: Вывод значения i

// программа для вывода значения i
for (let i = 1; i <= 5; i++) {
  // условие с continue
  if (i == 3) {
    continue;
  }

  console.log(i);
}

Вывод в консоль:

1
2
4
5

В приведенной выше программе цикл for используется для вывода значения i на каждой итерации.

Обратите внимание на оператор continue внутри цикла:

if(i == 3) {
    continue;
}

Это означает:

  • Когда i равно 3, оператор continue пропускает третью итерацию.
  • Затем i становится равным 4, и условие проверки и оператор continue оцениваются снова.
  • Следовательно, 4 и 5 выводятся в консоль в следующих двух итерациях.

continue с циклом while

В цикле while, continue пропускает текущую итерацию, и поток программы переходит обратно к условию while.

Оператор continue работает так же, как и в циклах while и do...while.

Пример 1: Вычисление положительного числа

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

// отрицательное число -> завершение цикла
// нечисловой символ -> пропустить итерацию

let sum = 0;
let number = 0;

while (number >= 0) {
  // суммируем все положительные числа
  sum += number;

  // принимаем ввод от пользователя
  number = parseInt(prompt('Введите число: '));

  // условие с continue
  if (isNaN(number)) {
    console.log('Вы ввели строку.');
    number = 0; // значение числа снова становится равным 0
    continue;
  }
}

// вывод суммы
console.log(`Сумма: ${sum}.`);

Вывод в консоль:

Введите число: 1
Введите число: 2
Введите число: привет
Вы ввели строку.
Введите число: 5
Введите число: -2
Сумма: 8.

В приведенной выше программе пользователь вводит число. Цикл while используется для печати общей суммы положительных чисел, введенных пользователем.

Обратите внимание на использование оператора continue:

if (isNaN(number)) {
    continue;
}
  • Когда пользователь вводит нечисловое число/строку, оператор continue пропускает текущую итерацию. Затем поток программы переходит к условию цикла while.
  • Когда пользователь вводит число меньше 0, цикл завершается.

В приведенной выше программе функция isNaN() используется для проверки того, является ли введенное пользователем значение числом или нет.

continue с вложенными циклами

Когда continue используется внутри двух вложенных циклов, continue пропускает текущую итерацию внутреннего цикла. Например,

// вложенные циклы for

// первый цикл
for (let i = 1; i <= 3; i++) {
  // второй цикл
  for (let j = 1; j <= 3; j++) {
    if (j == 2) {
      continue;
    }
    console.log(`i = ${i}, j = ${j}`);
  }
}

Вывод в консоль:

(i = 1), (j = 1);
(i = 1), (j = 3);
(i = 2), (j = 1);
(i = 2), (j = 3);
(i = 3), (j = 1);
(i = 3), (j = 3);

В приведенной выше программе, когда выполняется оператор continue, он пропускает текущую итерацию во внутреннем цикле, и поток программы переходит к updateExpression внутреннего цикла.

Следовательно, значение j = 2 никогда не выведется в консоль.

continue с меткой

При использовании вложенных циклов можно пропустить текущую итерацию, а поток программы можно передать выражению updateExpression оператора label.

Однако continue с меткой редко используется в JavaScript, поскольку это делает код более трудным для чтения и понимания.

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile