Циклы в JavaScript

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

Оператор цикла for

В JavaScript циклы чаще всего создаются с помощью оператора цикла for. Он выглядит так:

for (let i=1; i<5; i++)
  {
  document.write(i);
  }

У оператора for содержится в скобках три выражения, разделённых точкой с запятой. Эти выражения имеют такой смысл:

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

Второе выражение. Содержит условие, при котором цикл выполняется. Когда условие перестаёт выполняться, цикл прекращается.

Третье выражение. В нём производится изменение значения переменной i.

Далее в фигурных скобках следуют строки, которые выполняются в цикле.

Порядок работы оператора for такой:

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

В предложенном примере переменная i имеет начальное значение 1. После выполнения строк цикла она каждый раз увеличивается на единицу. Цикл выполняется до тех пор, пока i меньше 5. В фигурных скобках содержится только одна строка. Она выводит на экран текущее значение переменной i.

Создайте страницу и добавьте на неё опрератор for так, как он написан в примере. Запустите страницу и посмотрите как оператор работает. Затем попробуйте что нибудь изменить в операторе. Измените начальное значение или условие цикла, добавьте другие строки в цикл.

Строки, которые находятся в фигурных скобках, называются тело цикла. Одно выполнение этих строк называется итерация. Если строки выполнились 5 раз, то это 5 итераций.

Цикл со счётчиком

В нашем примере переменная i получает начальное значение 1 и увеличивается на единицу на каждой итерации. Это самый распространённый вариант. Такой цикл называется цикл со счётчиком, а переменная i называется счётчик цикла. Это используется, когда нужно выполнить какие-то действия конкретное количество раз. Но в JavaScript цикл со счётчиком - это далеко не единственный способ создания цикла. Переменной i можно задавать любое начальное значение и изменять как угодно. Главное правило остаётся неизменным - пока условие цикла соблюдается, цикл выполняется.

Оператор цикла while

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

У оператора while в скобках пишется условие цикла, а затем в фигурных скобках тело цикла. Пример:

let n = 1;
while (n < 1000)
  {
  n = n * 2.3;
  document.write('<br>');
  document.write(n);
  }

В приведённом примере переменная n умножается на число 2.3 и полученный результат отдельной строкой выводится на экран. Цикл продолжается до тех пор, пока значение n не превысит 1000.

При рассмотрении оператора присваивания мы применяли краткую запись для арифметических выражений. Строка 16 может выглядеть так:

n *= 2.3;

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

В операторах цикла while и for могут использоваться слова continue и break. continue останавливает текущую итерацию, и происходит очередная проверка условия и очередная итерация. А break прекращает цикл и начинают работать строки, следующие за циклом.

Конструкция do while

Оператор цикла while можно использовать вместе с ключевым словом do. При этом оператор выглядит совсем по-другому. Сначала пишется слово do и тело цикла. А затем while и условие цикла. В этом случае сначала выполняется тело цикла, а потом проверяется условие. Поэтому первая итерация будет обязательно, независимо от условия, ведь сначала производится итерация и только потом первый раз проверяется условие. Пример:

let f = 10;
do 
  {
  document.write('<br>');
  document.write('Строка выполнится хотя бы один раз');
  f++;
  }
while (f < 2)

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

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

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

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

for (let i=1; i<=10; i++)
  {
  document.write('<br>');
  document.write('Строка внешнего цикла ');
  
  for (let k=1; k<=5; k++)
    {
    document.write(k + " ");
    }
  }

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