базовый курс

ГРУППА КУРСА

Циклы в JavaScript

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

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

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

JavaScript:

+
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
<script>
9
10
11
12
for (var 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 в скобках пишется условие цикла, а затем в фигурных скобках тело цикла. Пример:

13
14
15
16
17
18
19
var n=1;
while (n<1000)
  {
  n=n*2.3;
  document.write('<br>');
  document.write(n);
  }

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

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

16
n*=2.3;

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

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

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

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

20
21
22
23
24
25
26
27
i=10;
do 
  {
  document.write('<br>');
  document.write('Строка выполнится хотя бы один раз');
  i++;
  }
while (i<2)

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

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

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

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

28
29
30
31
32
33
34
35
36
for (i=1; i<=10; i++)
  {
  document.write('<br>');
  document.write('Строка внешнего цикла ');
  for (var k=1; k<=5; k++)
    {
    document.write(k+" ");
    }
  }

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