Циклы и итерации
Циклы — простой способ сделать какое-то действие несколько раз. Эта глава руководства JavaScript Guide познакомит вас с различными операторами доступными в JavaScript.
Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры «Иди 5 шагов на восток» может быть выражена в виде цикла:
Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз (не забывайте про нулевой раз повторения, отсчёт в массиве начинается с 0). Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще.
Операторы предназначенные для организации циклов в JavaScript:
Цикл for
Цикл for повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор for в JavaScript аналогичен оператору for в Java и C. Объявление оператора for выглядит следующим образом:
При его выполнении происходит следующее:
- Выполняется выражение начало , если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.
- Выполняется условие . Если условие истинно, то выполняются выражения . Если оно ложно, цикл for прерывается. Если же условие полностью пропущено, то оно считается истинным.
- Выполняются выражения . Чтобы выполнить несколько выражений, используются блок-выражение < . >для группировки выражений.
- Обновляется шаг , если он есть, а затем управление возвращается к шагу 2.
Пример
В следующей функции есть цикл for , который считает количество выбранных жанров в списке прокрутки (элемент <select> , который позволяет выбрать несколько элементов). Цикл for объявляет переменную i и задаёт ей значение 0. Также он проверяет, что i меньше количества элементов в элементе <select> , выполняет оператор if и увеличивает i на один после каждого прохода цикла.
Цикл do. while
Цикл do. while повторяется пока заданное условие истинно. Оператор do. while имеет вид:
выражения выполняются пока условие истинно. Чтобы использовать несколько выражений, используйте блок-выражение < . >, чтобы сгруппировать их. Если условие истинно, выражения выполнятся снова. В конце каждого прохода условие проверяется. Если условие ложно, выполнение приостанавливается и управление передаётся выражению после do. while .
Пример
В следующем примере, цикл do выполнится минимум 1 раз и запускается снова, пока i меньше 5.
Цикл while
Цикл while выполняет выражения пока условие истинно. Выглядит он так:
Если условие становится ложным, выражения в цикле перестают выполняться и управление переходит к выражению после цикла.
Условие проверяется на истинность до того, как выполняются выражения в цикле. Если условие истинно, выполняются выражения , а затем условие проверяется снова. Если условие ложно, выполнение приостанавливается и управление переходит к выражению после while .
Чтобы использовать несколько выражений, используйте блок выражение < . >, чтобы сгруппировать их.
Пример 1
Следующий цикл while работает, пока n меньше трёх:
С каждой итерацией, цикл увеличивает n и добавляет это значение к x . Поэтому, x и n получают следующие значения:
- После первого прохода: n = 1 и x = 1
- После второго: n = 2 и x = 3
- После третьего прохода: n = 3 и x = 6
После третьего прохода, условие n < 3 становится ложным, поэтому цикл прерывается.
Пример 2
Избегайте бесконечных циклов. Убедитесь, что условие цикла в итоге станет ложным; иначе, цикл никогда не прервётся. Выражения в следующем цикле while будут выполняться вечно, т.к. условие никогда не станет ложным:
Метка (label)
Метка представляет собой оператор с идентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы break или continue , чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.
Синтаксис метки следующий:
Значение метки может быть любым корректным JavaScript идентификатором, не являющимся зарезервированным словом. Оператор , указанный вами после метки может быть любым выражением.
Пример
В этом примере, метка markLoop обозначает цикл while .
break
Используйте оператор break , чтобы прерывать цикл, переключать управление или в сочетании с оператором метка.
- Когда вы используете break без метки, он прерывает циклы while , do-while и for или сразу переключает управление к следующему выражению.
- Когда вы используете break с меткой, он прерывает специально отмеченное выражение.
Синтаксис оператора может быть таким:
- break;
- break Метка;
Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.
Пример 1
Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение — theValue :
Пример 2: Прерывание метки
continue
Оператор continue используется, чтобы шагнуть на шаг вперёд в циклах while , do-while , for или перейти к метке.
- Когда вы используете continue без метки, он прерывает текущую итерацию циклов while , do-while и for и продолжает выполнение цикла со следующей итерации. В отличие от break , continue не прерывает выполнение цикла полностью. В цикле while он прыгает к условию. А в for увеличивает шаг .
- Когда вы используете continue с меткой, он применяется к циклу с этой меткой.
Синтаксис continue может выглядеть так:
- continue;
- continue Метка ;
Пример 1
Следующий пример показывает цикл while с оператором continue , который срабатывает, когда значение i равно 3. Таким образом, n получает значения 1, 3, 7 и 12.
Пример 2
Выражение, отмеченное checkiandj содержит выражение отмеченное checkj . При встрече с continue , программа прерывает текущую итерацию checkj и начинает следующую итерацию. Каждый раз при встрече с continue , checkj переходит на следующую итерацию, пока условие возвращает false . Когда возвращается false , после вычисления остатка от деления checkiandj , checkiandj переходит на следующую итерацию, пока его условие возвращает false . Когда возвращается false , программа продолжает выполнение с выражения после checkiandj .
Если у continue проставлена метка checkiandj , программа может продолжиться с начала метки checkiandj .
for. in
Оператор for. in проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства. Цикл for. in выглядит так:
Пример
Следующая функция берёт своим аргументом объект и его имя. Затем проходит по всем свойствам объекта и возвращает строку, которая содержит имена свойств и их значения.
Для объекта car со свойствами make и model , результатом будет:
Пример №2
Также, по ключу можно выводить значение:
Массивы
Хотя, очень заманчиво использовать for. in как способ пройтись по всем элементам Array , этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный for для числовых индексов при взаимодействии с массивами, поскольку оператор for. in проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.
Пример
for. of
Оператор for. of создаёт цикл, проходящий по перечислимым объектам (en-US) (включая Array , Map (en-US), Set , объект arguments (en-US) и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.
Следующий пример показывает разницу между циклами for. of и for. in . Тогда как for. in проходит по именам свойств, for. of проходит по значениям свойств:
Циклы while и for
При написании скриптов зачастую встаёт задача сделать однотипное действие много раз.
Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код.
Для многократного повторения одного участка кода предусмотрены циклы.
Небольшое объявление для продвинутых читателей.
В этой статье рассматриваются только базовые циклы: while , do..while и for(..;..;..) .
Если вы пришли к этой статье в поисках других типов циклов, вот указатели:
- См. for…in для перебора свойств объекта.
- См. for…of и Перебираемые объекты для перебора массивов и перебираемых объектов.
В противном случае, продолжайте читать.
Цикл «while»
Цикл while имеет следующий синтаксис:
Код из тела цикла выполняется, пока условие condition истинно.
Например, цикл ниже выводит i , пока i < 3 :
Одно выполнение тела цикла по-научному называется итерация. Цикл в примере выше совершает три итерации.
Если бы строка i++ отсутствовала в примере выше, то цикл бы повторялся (в теории) вечно. На практике, конечно, браузер не позволит такому случиться, он предоставит пользователю возможность остановить «подвисший» скрипт, а JavaScript на стороне сервера придётся «убить» процесс.
Любое выражение или переменная может быть условием цикла, а не только сравнение: условие while вычисляется и преобразуется в логическое значение.
Например, while (i) – более краткий вариант while (i != 0) :
Если тело цикла состоит лишь из одной инструкции, мы можем опустить фигурные скобки <…>:
Цикл «do…while»
Проверку условия можно разместить под телом цикла, используя специальный синтаксис do..while :
Цикл сначала выполнит тело, а затем проверит условие condition , и пока его значение равно true , он будет выполняться снова и снова.
Такая форма синтаксиса оправдана, если вы хотите, чтобы тело цикла выполнилось хотя бы один раз, даже если условие окажется ложным. На практике чаще используется форма с предусловием: while(…) <…>.
Цикл «for»
Более сложный, но при этом самый распространённый цикл — цикл for .
Выглядит он так:
Давайте разберёмся, что означает каждая часть, на примере. Цикл ниже выполняет alert(i) для i от 0 до (но не включая) 3 :
Рассмотрим конструкцию for подробней:
| часть | ||
|---|---|---|
| начало | let i = 0 | Выполняется один раз при входе в цикл |
| условие | i < 3 | Проверяется перед каждой итерацией цикла. Если оно вычислится в false , цикл остановится. |
| тело | alert(i) | Выполняется снова и снова, пока условие вычисляется в true . |
| шаг | i++ | Выполняется после тела цикла на каждой итерации перед проверкой условия. |
В целом, алгоритм работы цикла выглядит следующим образом:
То есть, начало выполняется один раз, а затем каждая итерация заключается в проверке условия , после которой выполняется тело и шаг .
Если тема циклов для вас нова, может быть полезным вернуться к примеру выше и воспроизвести его работу на листе бумаги, шаг за шагом.
Вот в точности то, что происходит в нашем случае:
В примере переменная счётчика i была объявлена прямо в цикле. Это так называемое «встроенное» объявление переменной. Такие переменные существуют только внутри цикла.
Вместо объявления новой переменной мы можем использовать уже существующую:
Пропуск частей «for»
Любая часть for может быть пропущена.
Для примера, мы можем пропустить начало если нам ничего не нужно делать перед стартом цикла.
Можно убрать и шаг :
Это сделает цикл аналогичным while (i < 3) .
А можно и вообще убрать всё, получив бесконечный цикл:
При этом сами точки с запятой ; обязательно должны присутствовать, иначе будет ошибка синтаксиса.
Прерывание цикла: «break»
Обычно цикл завершается при вычислении условия в false .
Но мы можем выйти из цикла в любой момент с помощью специальной директивы break .
Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт:
Директива break в строке (*) полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на alert .
Вообще, сочетание «бесконечный цикл + break » – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине или даже в нескольких местах его тела.
Переход к следующей итерации: continue
Директива continue – «облегчённая версия» break . При её выполнении цикл не прерывается, а переходит к следующей итерации (если условие все ещё равно true ).
Её используют, если понятно, что на текущем повторе цикла делать больше нечего.
Например, цикл ниже использует continue , чтобы выводить только нечётные значения:
Для чётных значений i , директива continue прекращает выполнение тела цикла и передаёт управление на следующую итерацию for (со следующим числом). Таким образом alert вызывается только для нечётных значений.
Цикл, который обрабатывает только нечётные значения, мог бы выглядеть так:
С технической точки зрения он полностью идентичен. Действительно, вместо continue можно просто завернуть действия в блок if .
Однако мы получили дополнительный уровень вложенности фигурных скобок. Если код внутри if более длинный, то это ухудшает читаемость, в отличие от варианта с continue .
Обратите внимание, что эти синтаксические конструкции не являются выражениями и не могут быть использованы с тернарным оператором ? . В частности, использование таких директив, как break/continue , вызовет ошибку.
Например, если мы возьмём этот код:
…и перепишем его, используя вопросительный знак:
…то будет синтаксическая ошибка.
Это ещё один повод не использовать оператор вопросительного знака ? вместо if .
Метки для break/continue
Бывает, нужно выйти одновременно из нескольких уровней цикла сразу.
Например, в коде ниже мы проходимся циклами по i и j , запрашивая с помощью prompt координаты (i, j) с (0,0) до (2,2) :
Нам нужен способ остановить выполнение, если пользователь отменит ввод.
Обычный break после input лишь прервёт внутренний цикл, но этого недостаточно. Достичь желаемого поведения можно с помощью меток.
Метка имеет вид идентификатора с двоеточием перед циклом:
Вызов break <labelName> в цикле ниже ищет ближайший внешний цикл с такой меткой и переходит в его конец.
В примере выше это означает, что вызовом break outer будет разорван внешний цикл до метки с именем outer .
Таким образом управление перейдёт со строки, помеченной (*) , к alert(‘Готово!’) .
Можно размещать метку на отдельной строке:
Директива continue также может быть использована с меткой. В этом случае управление перейдёт на следующую итерацию цикла с меткой.
Метки не дают возможности передавать управление в произвольное место кода.
Например, нет возможности сделать следующее:
Директива break должна находиться внутри блока кода. Технически, подойдет любой маркированный блок кода, например:
…Хотя в 99.9% случаев break используется внутри циклов, как мы видели в примерах выше.
К слову, continue возможно только внутри цикла.
Итого
Мы рассмотрели 3 вида циклов:
- while – Проверяет условие перед каждой итерацией.
- do..while – Проверяет условие после каждой итерации.
- for (;;) – Проверяет условие перед каждой итерацией, есть возможность задать дополнительные настройки.
Чтобы организовать бесконечный цикл, используют конструкцию while (true) . При этом он, как и любой другой цикл, может быть прерван директивой break .
Если на данной итерации цикла делать больше ничего не надо, но полностью прекращать цикл не следует – используют директиву continue .
Обе этих директивы поддерживают метки, которые ставятся перед циклом. Метки – единственный способ для break/continue выйти за пределы текущего цикла, повлиять на выполнение внешнего.
Заметим, что метки не позволяют прыгнуть в произвольное место кода, в JavaScript нет такой возможности.
Циклы в JavaScript

Циклы – это простой способ для многократного выполнения одних и тех же действий (кода).
При этом однократное выполнения кода в цикле называется итерацией .
В JavaScript существуют различные виды циклов, но все они, по сути, делают одно и тоже. Просто с помощью одних циклов более просто решаются одни задачи, с помощью других – иные:
Цикл for
Данный цикл в основном используется когда известно точное количество повторений. Этот цикл ещё называют циклом со счётчиком.
Синтаксис цикла «for»:

Основные части конструкции цикла «for»:
- инициализация — это выражение, которое выполняется один раз перед выполнением цикла; обычно используется для инициализации счётчика;
- условие — это выражение, истинность которого проверяется перед каждой итерацией; если выражение вычисляется как истина , то выполняется итерация; в противном случае цикл «for» завершает работу;
- финальное выражение — это выражение, которое выполняется в конце каждой итерации; обычно используется для изменения счетчика;
- тело цикла — инструкции, выполнение которых нужно повторять.
Рассмотрим пример цикла, который выведет в консоль числа от 1 до 8:
- инициализация: var i = 1 (объявление переменной i и присвоение ей значения 1);
- условие выполнения цикла: i <= 8 (пока значение переменной i меньше или равно 8);
- финальное выражение, которое нужно выполнять в конце каждой итерации: i++ (увеличение значение переменной i на 1);
- инструкция, которую нужно выполнять: console.log(i) (выведение значения счётчика в консоль).
При этом если тело цикла состоит из одной инструкции, то её можно не заключать в фигурные скобки .
Таким образом, пример, приведённый выше, можно записать ещё так:
Необязательные части цикла цикла «for».
В «for» все части цикла являются не обязательными.
Например, можно пропустить выражение инициализации:
В этом случае инициализацию переменной можно вынести за пределы цикла.
Условие в «for» тоже является не обязательным. Без условия цикл будет выполняться бесконечное количество раз. В этом случае чтобы его прервать (выйти из цикла) необходимо использовать инструкцию break .
Финальное выражение в «for» также является не обязательным. Счётчик цикла в этом случае можно, например, изменять в теле.
В «for» можно вообще опустить 3 выражения (бесконечный цикл):
Кроме этого, в качестве тела цикла «for» можно использовать пустое выражение ( ; ). Это используется, когда вам не нужно выполнять ни одной инструкции.
Пустое выражение в этом случае рекомендуется дополнительно снабжать комментарием:
Пример использования цикла «for» для перебора элементов массива:
Пример, в котором выведем таблицу умножения в консоль. Для реализации этого примера будем использовать вложенные циклы.

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

Истинность условия проверяется перед каждым выполнением. Если перед первой итерацией условие ложно, то цикл не выполнится ни разу.
Пример, в котором выведем в консоль чётные числа в диапазоне от 1 до 8:
Цикл do. while
Цикл «do. while», также как и цикл «while», выполняет одни и те же инструкции до тех пор, пока указанное условие истинно. Но в отличие от «while» в «do. while» условие проверяется после выполнения инструкций. Поэтому цикл «do. while» в любом случае выполнится не меньше одного раза, даже если условие изначально ложно.

Пример, в котором выведем в консоль сумму чисел, которые будем запрашивать у пользователя с помощью функции prompt :
Цикл for. in
Цикл «for. in» предназначен для перебора перечисляемых имён свойств объекта. В JavaScript свойство является перечисляемым, если его внутренний флаг [[Enumerable]] равен true .
Свойства объекта, которые не относятся к перечисляемым, в цикле не участвуют.
Например, объект (массив) созданный с использованием функции-конструктора Array или его литеральной записи имеет не перечисляемые свойства от Array.prototype и Object.prototype , такие как indexOf() , some() , toString() и др. Они не будут участвовать в цикле.
Переберём свойства объекта, созданного с помощью литеральной записи:
Кроме этого, следует отметить, что цикл for. in проходит не только по перечисляемых свойствам этого объекта, но и по наследуемым.
Если вам наследуемые свойства не нужно учитывать, то их можно пропустить:
Использование цикла for. in для перебора массива. В массиве свойствами являются числовые индексы.
Цикл for. in проходит по свойствам в произвольном порядке. Поэтому если при переборе массива для вас важен порядок символов, то данный цикл лучше не использовать.
При использовании цикла for…in стоит обратить внимание на то, что если вы к массиву добавили свои пользовательские свойства, то он по ним тоже пройдётся:
Если вам такой сценарий не нужен, то тогда для перебора массивов лучше использовать обычный цикл for.
Использование цикла for…in для перебора символов в строке:
Инструкции break и continue
Внутри тела цикла можно использовать специальные инструкции: break и continue .
Инструкция «break» предназначена для прекращения выполнения текущего цикла . Другими словами, она осуществляет выход и передачу управления инструкции, идущей после этого цикла.
Пример, в котором завершим цикл по перебору элементов массива, если его текущий элемент не будет являться числом:
Инструкция «continue» предназначена для прекращения дальнейшего выполнения кода и перехода к следующей итерации цикла .
Пример, в котором найдём в слове «программирование» символы «а» и «о», и выведем их позиции в консоль:
Метки для break и continue
Метка представляет собой идентификатором с двоеточием, который необходимо указать перед циклом.
Далее после оператора break или continue необходимо указать эту метку:
Вызов break someLabel приведёт к переходу в конец цикла, перед которым данная метка указана .
Если метка используется с ключевым словом continue , то в этом случае выполнение этого действия приведёт к немедленному переходу к следующей итерации цикла, перед которым данная метка указана.
В коде с одиночным циклом использование метки не даст никакого результата. Её есть смысл использовать только когда вам нужно выйти сразу из нескольких циклов.
Пример, в котором выйдем сразу из 2 циклов, когда произведение значений переменных-счётчиков даст число большее 10.
Кроме этого, операторы break и continue нельзя использовать в выражениях тернарных операторов.
Цикл for. of (новинка в ES6)
Цикл for. of появился в стандарте ES6. Предназначен он для перебора итерируемых объектов , т.е. объектов, в которых реализован метод Symbol.iterator . Этот метод ещё называют итератором . Именно его и использует цикл for. of для перебора объектов.
Метод Symbol.iterator имеется у String , Array , Map , Set , arguments , NodeList и других объектов.
Пример использование цикла for. of для посимвольного перебора строки:
Пример использование цикла for. of для перебора коллекции DOM-элементов:
Пример использование цикла for. of для перебора массива:
Чем цикл for. of отличается от for. in
Первое отличие цикла for. of от for. in заключается в том, что он может применяться только для итерируемым объектов, т.е. объектов, в которых реализован итератор ( Symbol.iterator ). Цикл for. in итератор не использует. Он предназначен для перебора любых объектов.
Второе отличие заключается в том, что цикл for. of перебирает объект так, как это определено в итераторе. Например, в Array итератор реализован так, что цикл for. of пройдёт только по значениям в массиве и не будет включать в перебор другие (не индексные) свойства. Цикл for. in организован по-другому, он перебирает все перечисляемые свойства (имена ключей) объекта, в том числе и наследуемые.
Рассмотрим эти отличия. Для этого возьмём предыдущий пример и добавим к нему пользовательское свойство, например, hero и установим ему значение ‘Wasp’ .
При использовании for. of он переберёт все значения этого массива:
При использовании for. in он переберёт все перечисляемые имена ключей этого объекта:
Чтобы получить значение ключа по его имени можно воспользоваться квадратными скобками:
Самостоятельное создание итератора для объекта
Рассмотрим ещё один пример. В этом примере мы самостоятельно определим как должен итерироваться объект. Для этого создадим объект и определим ему итератор.
Создание итератора начинается с добавления к объекту специального метода. Этот метод необходимо спроектировать так, чтобы он возвращал значения последовательно (одно за другим). Название методу согласно стандарту необходимо определить с помощью символа Symbol.iterator . Итератор должен возвращать всего один метод next() . Этот метод в свою очередь тоже должен возвращать объект, состоящий из 2 свойств: value и done . Ключ done — булевый. Он определяет есть ли ещё значения в последовательности ( false — да, true — нет). Ключ value должен содержать следующее значение последовательности.
Задачи по циклам
1. Написать с помощью цикла while «переворот» числа. Другими словами, нужно создать новое число, у которого цифры шли бы в обратном порядке (например: 472 -> 274).
Name already in use
javascript-tutorial-ru / 1-js / 2-first-steps / 15-while-for / article.md
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
Циклы while, for
При написании скриптов зачастую встает задача сделать однотипное действие много раз.
Например, вывести товары из списка один за другим. Или просто перебрать все числа от 1 до 10 и для каждого выполнить одинаковый код.
Для многократного повторения одного участка кода — предусмотрены циклы.
Цикл while имеет вид:
Пока условие верно — выполняется код из тела цикла.
Например, цикл ниже выводит i пока i < 3 :
Повторение цикла по-научному называется «итерация». Цикл в примере выше совершает три итерации.
Если бы i++ в коде выше не было, то цикл выполнялся бы (в теории) вечно. На практике, браузер выведет сообщение о «зависшем» скрипте и посетитель его остановит.
Бесконечный цикл можно сделать и проще:
Условие в скобках интерпретируется как логическое значение, поэтому вместо while (i!=0) обычно пишут while (i) :
Проверку условия можно поставить под телом цикла, используя специальный синтаксис do..while :
Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.
Синтаксис do..while редко используется, т.к. обычный while нагляднее — в нём не приходится искать глазами условие и ломать голову, почему оно проверяется именно в конце.
Чаще всего применяется цикл for . Выглядит он так:
Пример цикла, который выполняет alert(i) для i от 0 до 2 включительно (до 3 ):
- Начало: i=0 .
- Условие: i<3 .
- Шаг: i++ .
- Тело: alert(i) , т.е. код внутри фигурных скобок (они не обязательны, если только одна операция)
Цикл выполняется так:
- Начало: i=0 выполняется один-единственный раз, при заходе в цикл.
- Условие: i<3 проверяется перед каждой итерацией и при входе в цикл, если оно нарушено, то происходит выход.
- Тело: alert(i) .
- Шаг: i++ выполняется после тела на каждой итерации, но перед проверкой условия.
- Идти на шаг 2.
Иными словами, поток выполнения: начало -> (если условие -> тело -> шаг ) -> (если условие -> тело -> шаг ) -> . и так далее, пока верно условие .
Пропуск частей for
Любая часть for может быть пропущена.
Например, можно убрать начало . Цикл в примере ниже полностью идентичен приведённому выше:
Можно убрать и шаг :
А можно и вообще убрать всё, получив бесконечный цикл:
При этом сами точки с запятой ; обязательно должны присутствовать, иначе будет ошибка синтаксиса.
«`smart header Существует также специальная конструкция `for..in` для перебора свойств объекта.
Мы познакомимся с ней позже, когда будем говорить об объектах.
Директива break в строке (*) , если посетитель ничего не ввёл, полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на alert .
Вообще, сочетание «бесконечный цикл + break» — отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале-конце цикла, а посередине.
Следующая итерация: continue [#continue]
Директива continue прекращает выполнение текущей итерации цикла.
Она — в некотором роде «младшая сестра» директивы break : прерывает не весь цикл, а только текущее выполнение его тела, как будто оно закончилось.
Её используют, если понятно, что на текущем повторе цикла делать больше нечего.
Например, цикл ниже использует continue , чтобы не выводить чётные значения:
Для чётных i срабатывает continue , выполнение тела прекращается и управление передаётся на следующий проход for .
««smart header Цикл, который обрабатывает только нечётные значения, мог бы выглядеть так:
С технической точки зрения он полностью идентичен. Действительно, вместо continue можно просто завернуть действия в блок if . Однако, мы получили дополнительный уровень вложенности фигурных скобок. Если код внутри if более длинный, то это ухудшает читаемость, в отличие от варианта с continue .
Метки для break/continue
Бывает нужно выйти одновременно из нескольких уровней цикла.
Например, внутри цикла по i находится цикл по j , и при выполнении некоторого условия мы бы хотели выйти из обоих циклов сразу:
В коде выше для этого использована метка.
Метка имеет вид «имя:» , имя должно быть уникальным. Она ставится перед циклом, вот так:
Можно также выносить её на отдельную строку:
Вызов break outer ищет ближайший внешний цикл с такой меткой и переходит в его конец.
В примере выше это означает, что будет разорван самый внешний цикл и управление перейдёт на alert .
Директива continue также может быть использована с меткой, в этом случае управление перепрыгнет на следующую итерацию цикла с меткой.
JavaScript поддерживает три вида циклов:
- while — проверка условия перед каждым выполнением.
- do..while — проверка условия после каждого выполнения.
- for — проверка условия перед каждым выполнением, а также дополнительные настройки.
Чтобы организовать бесконечный цикл, используют конструкцию while(true) . При этом он, как и любой другой цикл, может быть прерван директивой break .
Если на данной итерации цикла делать больше ничего не надо, но полностью прекращать цикл не следует — используют директиву continue .
Обе этих директивы поддерживают «метки», которые ставятся перед циклом. Метки — единственный способ для break/continue повлиять на выполнение внешнего цикла.
Заметим, что метки не позволяют прыгнуть в произвольное место кода, в JavaScript нет такой возможности.