Какие циклы существуют в языке javascript

Какие циклы существуют в языке javascript

Какие циклы существуют в языке javascript

Циклы позволяют в зависимости от определенных условий выполнять некоторое действие множество раз. В JavaScript имеются следующие виды циклов:

Цикл for

Цикл for имеет следующее формальное определение:

Например, используем цикл for для перебора чисел от 0 до 4:

Первая часть объявления цикла — let i = 0 — создает и инициализирует счетчик — переменную i. И перед выполнением цикла ее значение будет равно 0. По сути это то же самое, что и объявление переменной.

Вторая часть — условие, при котором будет выполняться цикл: i<5 . В данном случае цикл будет выполняться, пока значение i не достигнет 5.

Третья часть — i++ — приращение счетчика на единицу.

То есть при запуске переменная i равна 0. Это значение отвечает условию i<5 , поэтому будет выполняться блок цикла, а именно строка кода

После выполнения блока цикла выполняется треться часть объявления цикла — приращение счетчика. То есть переменная i сановится равной 1. Это значение также отвечает условию, поэтому блок цикла снова выполняется. Таким образом, блок цикла сработает 5 раз, пока значение i не станет равным 5. Это значение НЕ отвечает условию, поэтому произойдет выход из цикла. И управление программой перейдет к инструкциям, которые идут после блока цикла. Консольный вывод программы:

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

При этом необязательно увеличивать счетчик на единицу, можно производить с ним другие действия, например, уменьшать на единицу:

В данном случае на консоль выводится числа от 10 до 6.

Или увеличим счетчик на 2:

Здесь выводятся на консоль все четные числа от 0 до 8

При этом можно опускать различные части объявления цикла:

В данном случае переменная i определена вне цикла. В самом объявлении цикла есть только условие, остальные две части отсутствуют. Изменение переменной происходит в самом блоке цикла: оно увеличивается на 10. В итоге на консоль будут выведены числа 0, 10, 20, 30, 40, 50.

Применение нескольких счетчиков в цикле

При необходимости можно использовать несколько счетчиков:

Здесь теперь используются два счетчика и два условия. Рассмотрим пошагово, что здесь происходит:

Первая итерация. Начальные значения переменных i и y:

Для каждой переменной установлены свои условия. И вначале начальные значения переменных соответствуют этим условиям:

В блоке цикла выводится сумма этих переменных. И дальше значения обоих переменных увеличиваются на единицу. Они становятся равны

Эти значения также соответствуют условиям, поэтому выполняется вторая итерация

Вторая итерация. Значения переменных i и y:

После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны

Эти значения также соответствуют условиям, поэтому выполняется третья итерация

Третья итерация. Значения переменных i и y:

После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны

Значение переменной i соответствует условию i < 5 , однако значение переменной j (4) НЕ соответствует условию j < 4 . Поэтому происходит выход из цикла. Его работа завершена.

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

Одни циклы могут внутри себя содержать другие:

Здесь один цикл включается в себя другой. ВО внешнем цикле определяется переменная i. Вначале она равна 1 и это значение соответствует условию цикла ( i <=5 ), поэтому будет выполняться блок цикла, который содержит внутренний цикл.

Во внутреннем цикле определяется переменная-счетчик j, которая изначально равна 1, и потом внутренний цикл выполняет 5 итераций, пока переменная j не станет равна 5.

После того, как блок внешнего цикла завершен, переменная i увеличивается на 1 и становится равной 2, что опять же соответствует условию. И снова выполняется блок внешнего цикла. В этом блоке снова выполняются пять итераций внутреннего цикла. И так далее. В итоге внутренний цикл будет выполняться 25 раз.

Цикл while

Цикл while выполняется до тех пор, пока некоторое условие истинно. Его формальное определение:

Опять же выведем с помощью while числа от 1 до 5:

Цикл while здесь будет выполняться, пока значение i не станет равным 6.

do..while

В цикле do сначала выполняется код цикла, а потом происходит проверка условия в инструкции while. И пока это условие истинно, цикл повторяется. Например:

Здесь код цикла сработает 5 раз, пока i не станет равным 5. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.

Операторы continue и break

Иногда бывает необходимо выйти из цикла до его завершения. В этом случае мы можем воспользоваться оператором break :

Данный цикл увеличивает переменную i c 1 до 10 включая, то есть согласно условию цикла блок цикла должен выполняться 10 раз, то есть поизвести 10 итераций. Однако поскольку в блоке цикла происходит поверка if(i===6) break; , то, когда значение переменной i достигнет 6, то данное условие прервет выполнение цикла с помощью оператора break. И цикл заершит работу.

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

В этом случае, когда значение переменной i станет равным 6, то в цикле конструкция if(i===6) continue завершит текущую итерацию, далее идущие инструкции цикла не будут выполняться, и произойдет переход к следующей итерации:

for..in

Цикл for..in предназначен главным образом для перебора объектов. Его формальное определение:

Этот цикл перебирает все свойства объекта. Например:

Здесь перебирается объек person, который имеет два свойства — name и age. Соответственно на консоли мы увидим:

Цикл for. of

Цикл for. of предназначен для перебора наборов данных. Например, строка представляет фактически набор символов. И мы можем перебрать ее с помощью данного цикла:

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

Другим примером может быть перебор массива:

В данном случае цикл перебирает элементы массива people. Каждый элемент последовательно помещается в константу person . И далее мы можем вывести ее значение на консоль:

Циклы 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 Guide познакомит вас с различными операторами доступными в JavaScript.

Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры «Иди 5 шагов на восток» может быть выражена в виде цикла:

Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз (не забывайте про нулевой раз повторения, отсчёт в массиве начинается с 0). Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще.

Операторы предназначенные для организации циклов в JavaScript:

Цикл for

Цикл ** for **повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор for в JavaScript аналогичен оператору for в Java и C. Объявление оператора for выглядит следующим образом:

При его выполнении происходит следующее:

  1. Выполняется выражение начало , если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.
  2. Выполняется условие . Если условие истинно, то выполняются выражения . Если оно ложно, цикл for прерывается. Если же условие полностью пропущено, то оно считается истинным.
  3. Выполняются выражения . Чтобы выполнить несколько выражений, используются блок-выражение < . >для группировки выражений.
  4. Обновляется шаг , если он есть, а затем управление возвращается к шагу 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 с меткой, он прерывает специально отмеченное выражение.

Синтаксис оператора может быть таким:

  1. break;
  2. break Метка;

Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.

Пример 1

Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение — theValue :

Пример 2: Прерывание метки

continue

Оператор continue используется, чтобы шагнуть на шаг вперёд в циклах while , do-while , for или перейти к метке.

  • Когда вы используете continue без метки, он прерывает текущую итерацию циклов while , do-while и for и продолжает выполнение цикла со следующей итерации. В отличие от break , continue не прерывает выполнение цикла полностью. В цикле while он прыгает к условию. А в for увеличивает шаг .
  • Когда вы используете continue с меткой, он применяется к циклу с этой меткой.

Синтаксис continue может выглядеть так:

  1. continue;
  2. 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 проходит по значениям свойств:

Ссылка на основную публикацию