Циклы while и do...while в JS

В этом уроке вы на примерах познакомитесь с циклами while и do...while в JavaScript.

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

Мы уже обсуждали циклы на примере цикла for. Здесь поговорим о while и do...while.

Цикл while в JavaScript

Синтаксис

while (условие) {
    // тело цикла
}

Как это работает

1. Цикл while оценивает условие.

2. Если условие — true, выполняется код внутри цикла while.

3. Условие снова оценивается.

4. Этот процесс продолжается до тех пор, пока условие не станет false.

5. Когда условие становится false, цикл останавливается.

Подробнее про условия можно почитать в статье «Операторы сравнения и логические операторы в JS».

Блок-схема

Пример 1. Выводим на экран числа от 1 до 5

// инициализируем переменные i и n
let i = 1, n = 5;

// цикл будет идти, пока i <= 5
// на каждой итерации i увеличивается на 1
while (i <= n) {
    console.log(i);
    i += 1;
}

Вывод

1
2
3
4
5

Как это работает

Итерация	Переменные	Условие i <= n	Что происходит
1	i = 1 n = 5	true	На экран выводится число 1. i увеличивается на 1 — до 2
2	i = 2 n = 5	true	На экран выводится число 2. i увеличивается на 1 — до 3
3	i = 3 n = 5	true	На экран выводится число 3. i увеличивается на 1 — до 4
4	i = 4 n = 5	true	На экран выводится число 4. i увеличивается на 1 — до 5
5	i = 5 n = 5	true	На экран выводится число 5. i увеличивается на 1 — до 6
6	i = 6 n = 5	false	Выход из цикла

Пример 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.

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

Функция promt() принимает ввод от пользователя как строку, поэтому мы дополнительно используем функцию parseInt() — она превращает строку в число.

Если складывать просто строки, они будут «соединяться». Например, '2' + '3' = '23'.

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

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

Цикл do...while в JavaScript

Синтаксис

do {
// тело цикла
} while (условие)

Как это работает

1. Сначала выполняется тело цикла. Только затем оценивается условие.

2. Если условие — true, тело цикла выполняется снова.

3. Условие оценивается еще раз.

4. Если условие — true, тело цикла выполняется снова.

5. Этот процесс продолжается до тех пор, пока условие не станет false. Тогда цикл останавливается.

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

Блок-схема

Пример 1. Выводим на экран числа от 1 до 5

let i = 1;
const n = 5;

do {
    console.log(i);
    i++;
} while(i <= n);

Вывод

1
2
3
4
5

Как это работает

Итерация	Переменные	Условие i <= n	Что происходит
	i = 1 n = 5	не проверяется	На экран выводится число 1. i увеличивается на 1 — до 2
1	i = 2 n = 5	true	На экран выводится число 2. i увеличивается на 1 — до 3
2	i = 3 n = 5	true	На экран выводится число 3. i увеличивается на 1 — до 4
3	i = 4 n = 5	true	На экран выводится число 4. i увеличивается на 1 — до 5
4	i = 5 n = 5	true	На экран выводится число 5. i увеличивается на 1 — до 6
5	i = 6 n = 5	false	Выход из цикла

Пример 2. Ищем сумму только положительных чисел

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

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

Введите число: -50
Сумма введенных положительных чисел — 0.

Если пользователь сразу введёт отрицательное число, цикл произведёт только одну итерацию.

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

Если условие цикла всегда истинно, цикл будет выполнять бесконечное количество раз — пока не заполнится память.

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

В примере выше условие всегда true. Тело цикла будет выполняться бесконечное количество раз. 

// бесконечный цикл 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 (условие) {
    // тело цикла
}