Циклы while и do…while в JavaScript

Дата публикации: 2016-08-25

От автора: циклы while и do…while используют реже, чем for, но они намного лучше подходят в определенных ситуациях, что делает их незаменимыми в JavaScript.

Из цикла можно выйти при помощи ключевого слова break. Цикл for всегда пройдет столько итераций, сколько вы задали: если вы скажите циклу for пройти n итераций, он это сделает. Другое дело циклы while и do…while. Эти циклы выполняют столько итераций, сколько потребуется для выполнения условия.

Цикл do-while

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

do {
    statements;
} while (condition);

do {

statements;

} while (condition);

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

Хороший пример – увеличение переменной с помощью случайного числа до определенного максимума. Этот метод я буду использовать в моей простой HTML5 игре в canvas.

Мне нужно было разбить круг на секторы в игре, как на круговой диаграмме. Но я не хотел, чтобы секторы были одинаковые: секторы должны были быть в пределах от минимального до максимального углов. Секторы в сумме должны были составлять 360 градусов. Другими словами, я не узнаю, сколько раз нужно запустить цикл, пока не запущу его. Но я знаю, что цикл запустится хотя бы раз, и это делает цикл do…while отличным кандидатом в этом примере. Упрощенная версия кода игры:

var i = 1,
angle = 0,
minAngle = 12,
maxAngle = 40,
randomSectors = [0];
do {
      angle = getRandom(minAngle,maxAngle) + randomSectors[i-1];
      randomSectors.push(angle);
      i++;                                           
} while (angle < 360)

var i = 1,

angle = 0,

minAngle = 12,

maxAngle = 40,

randomSectors = [0];

do {

angle = getRandom(minAngle,maxAngle) + randomSectors[i-1];

randomSectors.push(angle);

i++;

} while (angle < 360)

Переменной angle в цикле присваивается случайное значение в пределах от 12 до 40 градусов, которое потом добавляется к значению, ранее переданному в массив randomSectors. По мере выполнения цикла переменная angle постепенно ползет к значению 360, которое является условием завершения цикла. Если условие true, цикл завершает работу. Так как angle случайное число, я не знаю количество сгенерированных секторов. Однако я точно знаю, что будет хотя бы один.

Обратите внимание: так как условие в цикле do…while выполняется после прохождения итерации, то конечный угол, который хранится в последней «ячейке» массива randomSectors, может превышать 360 градусов по окончанию работы цикла. Данная проблема описывается в полном коде игры.

Цикл while

В цикле while сперва всегда выполняется условие. То есть цикл может вообще не выполниться или выполняться бесконечно (потенциально такое может быть). Структура цикла:

while (condition) {
    statements;
}

while (condition) {

statements;

}

Хороший пример – подбрасывание монеты для принятия решения. Сами того не осознавая, вы будете подбрасывать монету, пока не выпадет орел:

function coinFlip() {
    return (Math.floor(Math.random() * 2) === 0);
}
var tossUp = coinFlip();

while (tossUp === false) {
    console.log("Not heads, darnit. Flipping again…");
    tossUp = coinFlip();
}
console.log("Heads is true! Yay!");

function coinFlip() {

return (Math.floor(Math.random() * 2) === 0);

}

var tossUp = coinFlip();

while (tossUp === false) {

console.log("Not heads, darnit. Flipping again…");

tossUp = coinFlip();

}

console.log("Heads is true! Yay!");

По коду видно, что цикл while может вообще не запуститься, так как переменная tossUp может сразу получить значение true, то есть цикл будет не нужен. Чисто теоретически цикл while может постоянно говорить вам в консоли «Решка, попробуй еще…»: если первоначальное значение tossUp было false, а функция в цикле всегда возвращает false. В таком случае цикл никогда не завершится. На деле же надпись «Решка» выскочит один или два раза, после чего цикл закроется с сообщением «Орел – true».

Заключение

Как и в большинстве случаев, трюк с циклами while и do…while заключается не просто в знании, а в понимании, где их нужно применять. Этот навык можно получить только, выполняя много примеров. Есть и другие циклы со своим применением, о которых я расскажу в будущих статьях.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки: JavaScript