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

while - это оператор в JavaScript, позволяющий воспроизводить цикл, который выполняет задачу столько раз, пока истинно заданное условие. while чаще используется, когда количество итераций заранее неизвестно.

Синтаксис while


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

Условие проверяется перед каждым заходом в цикл, если логическое значение верно, выполняется инструкция, в противном случае следующий на циклом while код.

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

Пример №1

Цикл выводит модальное окно со значением n до тех пор пока n не будет меньше 4

    
    let n = 0;

    while (n < 4) {
        alert("n = " + n);
        n++;
    }
    

while (n < 4) - код выполняется до тех пор пока n меньше 4

alert("n = " + n) - вывод модального окна

n++ - значение переменной n увеличивается на 1

Пример №2

Выводит в console.log значение переменной num до тех пор пока num меньше или равно 12

    
    let num = 0;
    while (num <= 12) {
        console.log("num = " + num);
        num = num + 2;
    }
    

while (num <= 12) - код выполняется до тех пор пока num меньше или равно 12

console.log("num = " + num) - выводит в console значение num

num = num + 2 - с каждой итерацией увеличивает num на 2

Если бы в примерах выше в теле цикла отсутствовали строчки n++ и num = num + 2 такой цикл while повторялся бы бесконечно. Однако такого лучше не допускать, потому что на практике браузер просто виснет.

Пример №3

Условием цикла может быть не только сравнение, но также и любое выражение или переменная.

    
    let n = 6;
    while (n) {
        console.log("n = " + n);
        n--;
    }        
    

В данном случае while (n) это краткая запись while (i != 0)

Пример №4

Если в теле цикла одна строка, фигурные скобки можно не ставить

    
    let n = 6;
    while (n) console.log("n = " + n--);
    

Пример №5

Скрипт вычисляет 412 и выводит результат в модальном окне

    
    let result = 1;
    let counter = 0;
    while (counter < 12) {
        result = result * 4;
        counter = counter + 1;
    }
    alert(result);
    

Цикл do...while

Единственное отличие цикла do…while от while это то, что проверка условия происходит после выполнения тела цикла. Таким образом инструкция будет выполнена, как минимум один раз.

Синтаксис do...while

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

Инструкция выполнится, как минимум один раз и будет повторятся до тех пор пока условие истинно. Если тело цикла состоит из одной строки фигурные скобки можно не ставить.

Условие проверяется после выполнения инструкции, если истинно тогда запускается еще одна итерация, в противном случае выполняется код следующий за циклом do…while

Пример №6

    
    let result = '';
    let n = 0;
        
    do {
        n = n + 1;
        result = result + n;
        console.log("result = " + result)
    } while (n < 10);    
    

На последнем десятом шаге result будет равен 12345678910. Так получилось, потому что задавая переменную мы определили ее изначально как строку let result = ' '. Поэтому при каждой итерации результатом является не сумма чисел, а сумма строк.

Пример №7

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

    
    let yourName
    do {
        yourName = prompt("Напишите ваше имя");
    } while (!yourName);
    console.log(yourName);
    

Программа создает модальное окно, в котором просит написать имя и далее выводит его в console.

Прерывание цикла - break

Выход из while при условии false не единственный способ прекратить цикл. С помощью директивы break мы можем завершить замкнутый цикл в любой момент.

Пример №8

    
    let n = 0;

    while (n < 12) {
        if (n === 4) {
        break;
        }
        n = n + 1;
    }
        
    alert(n);
    

Без if с break цикл работал бы до тех пор пока условие было бы истинным, в нашем случае while прервался когда n стал равен 4.

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

Завершение текущей итерации - continue

Если необходимо прервать не весь цикл, а только одну итерацию при определенных условиях - используют дерективу continue. В while она переносит поток выполнения к условию.

Пример №9

    
    a = 0;
    b = 0;
    while (a < 10) {
        a++;
        if (a === 5) {
            continue;
        }
        b += a;
        console.log("b = " + b)
    }
    

При условии если a равно 5, итерация прекращается и поток переходит к проверке условия (a < 10)

Метки для continue и break

Если циклы вложены друг в друга директивы continue и break могут не решать нужную задачу без помощи меток. Например при определенных условиях нам нужно выйти из всех уровней цикла.

Пример №10

    
    let a = 0;
    let b = 0;
    cancelLoops:  while (true) {
        console.log('Outer loops: ' + a);
        a += 1;
        b = 1;
        while (true) {
            console.log('Inner loops: ' + b);
            b += 1;
            if (b === 8 && a === 5) {
            break cancelLoops;
            } else if (b === 8) {
            break;
            }
        }
        }        
    

cancelLoops - метка

break cancelLoops - выход из внешнего цикла

В этом примере при a = 5 и b = 8 мы переходим к завершению внешнего цикла while. Если a не равно 5 происходит выход из внутреннего цикла.

Пример №11

    
    let a = 0;
    let b = 10;
        
    checkab: while (a < 4) {
        console.log("a: " + a);
        a += 1;
        checkb: while (b > 4) {
            console.log("b: "+ b);
            b -= 1;
            if ((b % 2) == 0)
                continue checkb;
            console.log(b + " - нечётное число");
        }
        console.log("a = " + a);
        console.log("b = " + b);
    }
    

checkab - метка внешнего цикла

checkb - метка внутреннего цикла

continue checkab - завершение текущей итерации и начало новой

Итого

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

Циклы while и do…while могут быть прерваны если проверяемое условие false и задействована директива break.

Итерация может быть прервана с помощью директивы continue.

continue и break поддерживают метки, которые дают возможность выйти за пределы цикла.