Циклы for, while, do/while в JavaScript. Синтаксис циклов. Инструкции break и continue

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

Циклы for, while, do/while в JavaScript

» » Сообщение:

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

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

Цикл while

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

Циклы в JavaScript. Синтаксис цикла while
Циклы в JavaScript. Синтаксис цикла while

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

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

Код: Выделить всё Развернуть
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:

Циклы в JavaScript. Синтаксис цикла do/while в JavaScript
Циклы в JavaScript. Синтаксис цикла do/while в JavaScript

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

Код: Выделить всё Развернуть
var count = 0;
do {
  document.write(count + " ");
  count++;
} while(count < 5);

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

Цикл for

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

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

Циклы в JavaScript. Синтаксис цикла for в JavaScript
Циклы в JavaScript. Синтаксис цикла for в JavaScript

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

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

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

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

Код: Выделить всё Развернуть
for [i](var count = 0; count < 5; count++)[/i]
document.write[i](count + " ")[/i];

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

Код: Выделить всё Развернуть
var i = 0;
for [i](; i < 4; i++)[/i] ...

var i = 0;
for [i](; i < 4; )[/i] ...

for [i](var i = 1; /* нет условия */ ; i++)[/i] ...

// Это эквивалентно следующему коду
for [i](var i = 1; true; i++)[/i] ...

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

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

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

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

Код: Выделить всё Развернуть
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 приводит к немедленному выходу из текущего цикла.
Синтаксис инструкции break достаточно прост:

Код: Выделить всё Развернуть
break;

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

Код: Выделить всё Развернуть
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:

Код: Выделить всё Развернуть
continue;

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

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

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

Код: Выделить всё Развернуть
for (var i = 0; i <= 20; i++) {
  if((i % 2) != 0) continue;
  document.write(i + " ");
}

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

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

Метки инструкций имеют следующий синтаксис:

Код: Выделить всё Развернуть
идентификатор: инструкция
 
//  допускается идентификатор и инструкцию размещать на разных строках
 
идентификатор:
инструкция

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

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

Код: Выделить всё Развернуть
break имя_метки;

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

Код: Выделить всё Развернуть
var i = 0;
 
test:
while (i < 5) {
  i++;
  if (i == 2 || i == 3) continue test;
  document.write(i + " ");
}

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

Код: Выделить всё Развернуть
var i = 0;
 
i:
while (i < 5) {
  i++;
  if (i == 2 || i == 3) continue i;
  document.write(i + " ");
}

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

Код: Выделить всё Развернуть
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, но также выполнять «выход» и из любой вмещающей ее составной инструкции.

Код: Выделить всё Развернуть
var num = 10;
 
test: {
  if (num == 10) break test;
  document.write(num);  // не будет выполнено
}
цикл, итерация, count, while, false, инкремент, for, вложенные циклы, break, continue, true, switch



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0648JavaScript. Логические операторы и ...
Сообщение от: Admin
0929Обход child nodes - потомков элемен...
Сообщение от: Admin
02350Дженнифер Нидерст Роббинс. HTML5, C...
Сообщение от: Admin
0634Колонки одинаковой высоты - лучшее ...
Сообщение от: Admin
0560Замена прямых кавычек на “ёлочки”. ...
Сообщение от: Admin