логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool

Цикл while в JavaScript - примеры, условия, break, continue

Автор

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

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

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

Цикл 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

Пример 2: Сумма только положительных чисел

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

let sum = 0;

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

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

  // ввод ещё раз, если число положительное
  number = parseInt(prompt('Введите число: '));
}

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

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

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

В приведенной выше программе пользователю предлагается ввести число.

Здесь используется функция parseInt(), потому что функция prompt() принимает ввод от пользователя в виде строки. А когда добавляются числовые строки, она ведет себя как строка. Например, '2' + '3' = '23'. Поэтому функция parseInt() преобразует числовую строку в число.

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

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

Цикл 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 тело цикла выполняется хотя бы один раз.

Пример 3: Вывод чисел от 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

Пример 4: Сумма положительных чисел

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

let sum = 0;
let number = 0;

do {
  sum += number;
  number = parseInt(prompt('Введите число: '));
} while (number >= 0);

console.log(`Сумма: ${sum}.`);

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

Введите число: 2
Введите число: 4
Введите число: -500
Сумма: 6.

Здесь цикл do...while продолжается до тех пор, пока пользователь не введет отрицательное число. Когда число становится отрицательным, цикл завершается; отрицательное число не добавляется к переменной sum.

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

Введите число: -80
Сумма: 0.

Тело цикла do...while выполняется только один раз, если пользователь вводит отрицательное число.

Бесконечный цикл while

Если условие проверки в цикле for всегда true, он будет работать вечно (пока не заполнится память). Например,

// бесконечный цикл while
while (true) {
  // тело цикла
}

Пример бесконечного цикла do...while:

// бесконечный цикл do...while
const count = 1;
do {
  // тело цикла
} while (count == 1);

В приведенной выше программе условие всегда true, что приведет к выполнению кода бесконечное число раз.

Цикл for или while

Цикл for обычно используется, когда известно количество итераций. Например:

// этот цикл итерируется 5 раз
for (let i = 1; i <= 5; ++i) {
  // тело цикла
}

Циклы while и do...while обычно используются, когда количество итераций неизвестно. Например:

while (condition) {
  // тело цикла
}

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

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