Операторы цикла выполняют блок кода заданное число раз, либо до тех пор, пока не выполнится заданное условие.
Циклы особенно удобны, когда нужно выполнять один и тот же код много раз, каждый раз с разным значением.
Часто операторы цикла используются при работе с массивами.
Так, вместо того чтобы писать:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Можно написать:
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Различные виды операторов цикла
JavaScript поддерживает различные виды циклов:
- for – в цикле выполняет блок кода заданное число раз
- for/in – цикл по свойствам объекта
- while – выполняет блок кода до тех пор, пока заданное условие не будет равно true
- do/while – также выполняет блок кода до тех пор, пока заданное условие не будет равно true
Оператор цикла for
Оператор for это наиболее часто используемый инструмент для создания цикла.
Оператор цикла for имеет следующий синтаксис:
for (выражение 1; выражение 2; выражение 3) {
выполняемый блок кода
}
Выражение 1 выполняется до начала цикла (до начала выполнения блока кода).
Выражение 2 определяет условие продолжения цикла.
Выражение 3 выполняется после каждого прохода цикла.
Пример:
for (i = 0; i < 5; i++) {
text += "Число: " + i + "<br>";
}
Код этого примера можно прочитать следующим образом:
- выражение 1 до начала цикла инициализирует переменную-счетчик (var i = 0).
- выражение 2 определяет условие продолжения цикла (i должно быть меньше 5).
- выражение 3 после каждого прохода цикла увеличивает на 1 счетчик (i++).
Выражение 1
Обычно, выражение 1 используется для инициализации переменной, которая будет использоваться внутри цикла, как правило в качестве счетчика (i = 0).
При этом выражение 1 является необязательным.
Можно в выражении 1 инициализировать несколько переменных (разделяя их запятыми):
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Можно пропустить выражение 1 (и определить все необходимые значения до самого цикла):
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Выражение 2
Часто выражение 2 используется для вычисления состояния переменной-счетчика.
При этом выражение 2 также является необязательным.
Если выражение 2 возвращает true, то начнется новый цикл. Если оно вернет false, то цикл закончится.
Внимание! Если выражение 2 не определяется, то внутри цикла должен быть задан оператор break. Иначе цикл никогда не закончится, что приведет к краху браузера.
Выражение 3
Обычно, в выражении 3 изменяется значение переменной-счетчика.
При этом выражение 3 также является необязательным.
Выражение 3 может выполнять любые действия, например, уменьшение (i--), увеличение (i = i + 15) и т.д.
Выражение 3 может быть пропущено (например, если вычисления с переменной-счетчиком осуществляются внутри цикла):
var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Оператор цикла for/in
Оператор for/in используется для обхода в цикле свойств объекта:
var person = {fname:"Иван", lname:"Петров", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}
Оператор цикла while
Оператор while в цикле выполняет блок кода до тех пор, пока заданное условие равно true.
Синтаксис:
while (условие) {
выполняемый блок кода
}
В следующем примере код цикла будет выполняться снова и снова, пока значение переменной (i) будет меньше 10:
while (i < 10) {
text += "Число: " + i;
i++;
}
Внимание! Если вы забудете увеличить переменную, указанную в условии, то цикл никогда не закончится. Это приведет к краху браузера.
Оператор цикла do/while
Цикл do/while является вариантом цикла while. Этот цикл один раз выполнит блок кода перед проверкой условия завершения и затем будет повторять цикл до тех пор, пока условие не будет равно true.
Синтаксис:
do {
выполняемый блок кода
}
while (условие);
В следующем примере используется оператор цикла do/while. Такой цикл будет всегда выполняться по меньшей мере один раз, даже если условие равно false, потому что блок кода выполняется до проверки условия:
do {
text += "Число: " + i;
i++;
}
while (i < 10);
Не забывайте изменять значение переменной, используемой в условии завершения цикла, иначе цикл никогда не закончится!
For vs While
Если вы внимательно изучили эту главу, то вы, вероятно, заметили, что оператор цикла while практически идентичен оператору цикла for, у которого не используются выражение 1 и выражение 3.
В следующем примере для вывода названий машин из массива cars используется оператор цикла for:
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
for (;cars[i];) {
text += cars[i] + "<br>";
i++;
}
В следующем примере для вывода названий машин из массива cars используется оператор цикла while:
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
text += cars[i] + "<br>";
i++;
}
Операторы break и continue
Оператор break позволяет "выпрыгнуть" из цикла.
Оператор continue позволяет "перепрыгнуть" через один проход цикла.
Оператор break
В предыдущих главах этого учебника вы уже встречались с оператором break. Он использовался для "выпрыгивания" из оператора условия switch.
Также, оператор break может использоваться и для "выпрыгивания" из цикла.
Оператор break прерывает цикл и передает выполнение коду, следующему после оператора цикла (если есть):
for (i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "Число: " + i + "<br>";
}
Оператор continue
Оператор continue прекращает текущий проход цикла, если выполняется заданное условие, и начинает следующую итерацию цикла.
В следующем примере пропускается значение 3:
for (i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "Число: " + i + "<br>";
}
Метки
Чтобы определить метку в JavaScript, вы должны перед выражением указать имя метки с двоеточием:
метка:
выражение
Операторы break и continue единственные операторы в JavaScript, которые могут "выпрыгивать" из блока кода.
Синтаксис:
break имя_метки;
continue имя_метки;
Оператор continue (с ссылкой на метку или без) единственный способ пропустить один проход цикла.
Оператор break (без ссылки на метку) единственный способ выйти из цикла или условного оператора switch.
Оператор break с ссылкой на метку позволяет выйти из любого блока кода и перейти в конкретное место программы:
var cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
break list;
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
}
Стоит напомнить, что блок кода — это код, расположенный внутри фигурных скобок { и }.
