Циклы JavaScript

В этой главе:

  • Цикл while

  • Цикл do/while

  • Цикл for

  • Вложенные циклы

  • Инструкции break и continue

  • Метки инструкций

Цикл - это инструкция, позволяющая повторять выполнение некоторых действий (инструкций) определённое количество раз. Каждое отдельное исполнение инструкций в теле цикла называетсяитерация.

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

Цикл while

Синтаксис цикла while:

синтаксис цикла while в JavaScript

Инструкция while сначала вычисляет значение выражения. Полученное значение, если необходимо, неявно преобразуется к логическому типу. Само выражение называется условием выполнения цикла while или просто условие. Если выражение имеет ложное значение, интерпретатор не выполняет тело цикла, и переходит к выполнению следующей инструкции в коде программы. Если результатом вычисления выражения является истинное значение, то тело цикла выполняется, затем управление передаётся в начало цикла и выражение вычисляется снова. Иными словами, интерпретатор снова и снова выполняет инструкции расположенные в теле цикла, пока значение выражения остаётся истинным.

Рассмотрим простой пример цикла while:

1
2
3
4
5
var count = 0; // определяем переменную счётчик
while (count < 5) {
  document.write(count + " ");
  count++;     // если из кода убрать эту строку, то цикл будет бесконечным
}

Перед началом цикла значение переменной count устанавливается равным 0 (значение может быть любым). Это называется инициализацией переменной-счётчика. Значение выражения (count < 5) проверяется каждый раз перед итерацией цикла. Когда исполняется тело цикла, с помощью инкремента count++ значение переменной count увеличивается на единицу. После пяти итераций выражение вернёт значение false (так как значение переменной count уже будет не меньше 5) и работа цикла прекратится.

Большинство циклов имеют переменные-счётчики, аналогичные переменной count. Чаще всего в качестве счётчиков цикла выступают переменные с именами i, j и k, хотя для того чтобы сделать программный код более понятным, следует давать счётчикам более наглядные имена.

Цикл do/while

Синтаксис цикла do/while:

синтаксис цикла do/while в JavaScript

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

1
2
3
4
5
var count = 0;
do {
  document.write(count + " ");
  count++;
} while(count < 5);

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

Цикл for

Большинство циклов имеют некоторую переменную-счётчик. Эта переменная инициализируется перед началом цикла и проверяется перед каждой итерацией. Далее переменная-счётчик инкрементируется или изменяется каким-либо другим образом в конце тела цикла, непосредственно перед повторной проверкой условия выполнения цикла. И так, мы видим, что инициализация, проверка и обновление - это три ключевых операции, выполняемых с переменной цикла. Эти три шага являются явной частью синтаксиса цикла for:

синтаксис цикла for в JavaScript

Таким образом, все элементы, контролирующие выполнение цикла for, собраны в одном месте, в то время как в циклах других типов они находятся в различных частях кода.

Цикл for состоит из ключевого слова for, за которым следуют круглые скобки, внутри которых располагаются три выражения, разделяемые точками с запятой. Он имеет следующий порядок выполнения:

  1. Первое выражение всегда вычисляется только один раз - в начале цикла. В цикле for допускается определять переменные, поэтому обычно в качестве первого выражения выступает определение переменной-счётчика.

  2. Второе выражение определяет условие выполнения цикла. Оно вычисляется перед каждой итерацией и определяет, будет ли выполняться тело цикла. Если результатом вычисления выражения является истинное значение, инструкции, являющиеся телом цикла - выполняются. Если возвращается ложное значение, выполнение цикла завершается. Если при первой проверке условия, оно оказывается ложным, тело цикла не выполнится ни разу.

  3. После каждой итерации вычисляется третье выражение. Обычно его используют для изменения значения переменной-счётчика, которая используется в проверке условия выполнения цикла.

Небольшой пример, в котором выводятся цифры от 0 до 4:

1
2
for (var count = 0; count < 5; count++)
  document.write(count + " ");

Любое из выражений может отсутствовать, однако сами точки с запятой (;) обязательно должны присутствовать, иначе будет ошибка синтаксиса. Если второе выражение отсутствует, это означает, что цикл будет выполняться бесконечно.

1
2
3
4
5
6
7
8
9
10
var i = 0;
for (; i < 4; i++) ...
 
var i = 0;
for (; i < 4; ) ...
 
for (var i = 1; /* нет условия */ ; i++) ...
 
// Это эквивалентно следующему коду
for (var i = 1; true; i++) ...

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

1
2
3
4
5
// не выполнится, так как в проверке условия последнее выражение false
for (i = 1; i < 4, false; i++) ...
 
for (var i = 1, j = 5; i <= 5; i++, j--)
  document.write(i + " " + j +"<br>");

Вложенные циклы

Циклы могут иметь любое количество уровней вложенности:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
for(var i = 0; i < 3; i++) {
  document.write("Часть внешнего цикла. <br>");
  for(var j = 0; j < 2; j++) {
    document.write("Часть вложенного цикла. <br>");
  }
}
document.write("<br>");
 
var i = j = 0;
while (i < 3) {
  j = 0;
  document.write("Часть внешнего цикла. <br>");
  while(j < 1) {
    document.write("Часть вложенного цикла. <br>");
    j++;
  }
  i++;
}

Обратите внимание, что вложенный цикл полностью выполняется при каждой итерации внешнего цикла.

Инструкции break и continue

Иногда бывают ситуации, когда необходимо прервать выполнение цикла. Инструкция breakприводит к немедленному выходу из текущего цикла. Синтаксис инструкции достаточно прост:

1
break;

Ниже показано применение инструкции break:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
for(var i = -10; i <= 10; i++) {
  if(i > 0) break;   //завершить цикл, как только значение
                     //переменной i станет положительным
  document.write(i + " ");
}
document.write("Готово!<br><br>");
 
var j = -1;
for(var i = 0; i < 3; i++) {
  document.write("Часть внешнего цикла. <br>");
  while (j < 5) {
    j++;
    if (j == 2 || j == 3) break;
    document.write("j: "+ j +"<br>");
  }
}

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

1
continue;

Когда выполняется инструкция continue, текущая итерация цикла прерывается и начинается следующая. Для разных циклов инструкция даёт разный эффект:

  • После выполненения инструкции continue в цикле while проверяется условие выполнения, и если оно имеет значение true, тело цикла выполняется.

  • В цикле for после выполненения инструкции continue сначала вычисляется третье выражение, и только затем происходит проверка условия.

  • В цикле do/while после выполнения инструкции continue происходит переход в конец цикла и проверяется условие выполнения, если оно имеет значение true, тело цикла выполняется.

Ниже приведён пример, в котором инструкция continue используется в качестве вспомогательного средства для вывода чётных чисел в пределах от 0 до 20:

1
2
3
4
for (var i = 0; i <= 20; i++) {
  if((i % 2) != 0) continue;
  document.write(i + " ");
}

Метки инструкций

В JavaScript любая инструкция может быть помечена предшествующим идентификатором с двоеточием. Такой идентификатор называется меткой. Метки имеют следующий синтаксис:

1
2
3
4
5
6
идентификатор: инструкция
 
//  допускается идентификатор и инструкцию размещать на разных строках
 
идентификатор:
инструкция

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

1
break имя_метки;

Ниже приводится пример цикла while с меткой:

1
2
3
4
5
6
7
8
var i = 0;
 
test:
while (i < 5) {
  i++;
  if (i == 2 || i == 3) continue i;
  document.write(i + " ");
}

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

1
2
3
4
5
6
7
8
var i = 0;
 
i:
while (i < 5) {
  i++;
  if (i == 2 || i == 3) continue test;
  document.write(i + " ");
}

Переход к метке инструкции можно также осуществлять и из вложенных инструкций. Это бывает полезным, например, если необходимо выйти одновременно из нескольких уровней вложенности цикла.

1
2
3
4
5
6
7
8
9
10
11
12
13
test:
for (var i = 0; i < 5; i++)
  for (var j = 0; j < 5; j++)
    if (j == 3) break test;     // Завершает выполнение внешнего цикла
 
document.write("i: " + i + "<br> j: " + j);
 
test:
for (var i = 0; i < 5; i++)
  for (var j = 0; j < 5; j++)
    if (j == 3) continue test;  // Переходит к следующей итерации внешнего цикла
 
document.write("<br><br>i: " + i + "<br> j: " + j);

Инструкция break с меткой может быть использована не только внутри циклов и инструкции switch, но также выполнять "выход" и из любой вмещающей её составной инструкции.

1

2

3

4

5

6

var num = 10;
 
test: {
  if (num == 10) break test;
  document.write(num);  // не будет выполнено
}