логотип 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) {
  // тело цикла
}
Циклы в JavaScript – всё о циклах while, for, do-whileСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptСобытие DOMContentLoaded в JavaScriptОбъект события Event в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний