Изучение циклов While, Do While и For в JavaScript

JavaScript циклы используются, когда нужно осуществить действие или ряд действий известное количество раз до тех пор, пока определенное условие является истиной. Первое средство цикличного выполнения, которое мы рассмотрим, это While. Код в фигурных скобках этого цикла продолжает выполняться до тех пор, пока условие истинно:

javascript-looping-740X296

Давайте рассмотрим рабочий пример:

var i = 2;
while (i <= 20){
 if((i % 4) === 0) {
document.write(i + ' ');
}
i = i +2; 
}
;

Объяснение: мы используем цикл while для перебора всех четных чисел от 2 до 20. Если число делится на 4, мы его выводим. Мы начали с присвоения переменной i значения 2. При каждом выполнении цикла, мы увеличиваем значение i на 2. Цикл прекращается, когда значение i становится равным или больше 20:

1-2

While отличается от других циклов тем, что мы должны создать переменную, которая будет увеличиваться (в данном случае i) перед началом цикла. Если она не сможет увеличиться, то мы получим бесконечный цикл JavaScript.

Другой пример циклической структуры — это цикл do…while. Мы используем ее, когда знаем, что должны запустить цикл хотя бы один раз.

Рабочий пример:

do{ var year = alert( 'Угадайте год между 1950 и 1986.');
}while(year != 1979)
alert('У вас получилось!');

Объяснение: пользователю предлагается угадать год. Сообщение об этом выводится всегда, независимо от условия в скобках. Цикл продолжает работать и просит пользователя угадать, пока тот не предоставит правильный ответ — 1979. Когда это произойдет, цикл остановится, и пользователь будет предупрежден.

For — цикл с заданным числом повторений в JavaScript. Он является полностью автономным: создается переменная (которая будет увеличиваться), условие для проверки и действие увеличения — все делается внутри этого цикла, и именно в таком порядке. В этой циклической структуре мы можем использовать команду ‘continue’, чтобы перейти обратно к началу цикла и увеличить переменную.

Также можно использовать команду ‘break‘, чтобы выйти из цикла. Следующая команда будет выполнена за пределами цикла.

Рабочий пример:

Воспользуемся нашим примером от цикла while с небольшим изменением. Вместо того чтобы выводить все числа, которые делятся на 4, мы выведем все числа, которые делятся на 5 (между 30 и 45):

for(i = 30; i<=45; i++){
 if((i % 5) === 0) {
    document.write(i + ' ');
    continue;
 }
 if (i === 42){
  break;
 }
};
document.write ('мы достигли 42.');

Объяснение: мы используем цикл для перебора всех целых чисел от 30 до 45 (с шагом +1). Если встречается число, которое делится на 5, мы выводим его, а затем переходим обратно к ‘i ++‘. Так будет продолжаться до тех пор, пока не дойдем до 42, после чего мы выходим из цикла и выводим сообщение, что достигли 42:

2-3

Еще один вид JavaScript цикла – это for (k in х), в котором i представляет собой текущий ключ, а х — объект, который будет обрабатываться.

Рабочий пример:

var obj = {eyes: 'карие глаза', hair: 'каштановые волосы'};
for (k in obj){
     document.write(obj[k] + ' ,');
     document.write(k + '<br/>');
};

Объяснение: obj представляет собой объект, содержащий пару ключ-значение. В этом цикле for мы перебираем каждое из значений, используя текущий ключ, и выводим их вместе с ключами, разделяя запятой:

3-1

Заключение:

В этой статье мы рассмотрели три типа JavaScript циклов: While, Do…While и цикл For в JavaScript. Я надеюсь, что вам понравилась эта статья.

Перевод статьи “Learn While, Do While and For Loop in JavaScript” был подготовлен дружной командой проекта Сайтостроение от А до Я.