Циклы for и while. Структура и использование циклов.

15.11.2022 11:48

    При написании скриптов зачастую встаёт задача сделать однотипное действие много раз.

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

    Циклы позволяют выполнять один и тот же код много раз и используются они очень часто.

 

Цикл for
    Самый популярный вид циклов - цикл for. Синтаксис у него следующий:
 
for (A; B; I){S}
 
где
A - первоначальное выражение,
B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,
I - выражение инкремента,
{} - тело цикла,
S - операторы.
 
    Как всегда, на примере будет понятнее. Предположим, мы хотим написать сценарий, который будет складывать все числа от a до b, (где a и b будут вводиться пользователем) и отображать полученный результат.
 
Итак, на html-странице мы будем иметь следующий код:
 
    <html>
        <head>
            <title>javascript for</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
            <form name="forma7">
                Вас интересует сумма всех чисел
                от <input type="text" name="a1" size="5" maxlength="5">
                до <input type="text" name="a2" size="5" maxlength="5">
                <input type="button" value="Вычислить" onclick="summa(forma7);"><br>
                Сумма равна <input type="text" name="result" size="10" maxlength="10">
            </form>
        </body>
    </html>
 
Выглядеть она будет так:
 
 
Осталось на странице script.js написать саму функцию summa():
 
    function summa(obj) {
     var summa=0;
     var a1=1*obj.a1.value;
     var a2=1*obj.a2.value;
     for (var i = a1; i <= a2; i++) {
      summa+=i;
     }
     obj.result.value = summa;
    }
 
Из нового здесь только сам цикл, разберемся, как он работает:
 
параметру цикла i присваивается значение a1, т.е. число, которое указал пользователь в текстовом поле ОТ и тело цикла (в фигурных скобках) выполняется с этим значением, т.е. в переменную summa записывается значение равное a1.
 
После этого вычисляется выражение i++, т.е. значение i увеличивается на 1.
 
Затем javascript проверяет условие i <= a2 и, если оно истинно, тело цикла выполняется снова, т.е. значение переменной summa увеличивается на само себя плюс 1.
 
Таким образом, цикл выполняется до тех пор, пока не сложит все числа от a1 до a2.
 
Когда условие i <= a2 станет ложным, цикл прекратит свою работу, а полученный результат (значение переменной summa) будет выведен в поле result.
 
Обратите внимание, что переменную i можно объявить прямо в цикле - var i = a1
 
    В общем, на этом можно было бы и закончить, но все-таки есть еще один нюанс. Для правильной работы нашего цикла значение a2 должно быть больше значения a1. Добавим это условие в нашу функцию:
 
    function summa(obj) {
     var summa=0;
     var a1=1*obj.a1.value;
     var a2=1*obj.a2.value;
     if (a2 > a1){
      for (var i = a1; i <= a2; i++) {
        summa+=i;
      }
      obj.result.value = summa;
     }
     else
      alert("Значение ОТ должно быть меньше значения ДО")
    }
 
    Вот теперь наш цикл будет работать как надо.
 

Цикл while

    Не менее популярный вид циклов - цикл while. Синтаксис у него следующий:

 
while (B){S}
 
где
B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,
{} - тело цикла,
S - операторы.
 

    Иными словами, операторы S, выполняются до тех пор, пока условие B не станет ложным.

 

Например, цикл ниже выводит i, пока i < 3:
 
let i = 0;
while (i < 3) { // выводит 0, затем 1, затем 2
  alert( i );
  i++;
}
 

    Одно выполнение тела цикла называется итерация. Цикл в примере выше совершает три итерации.

    Если бы строка i++ отсутствовала в примере выше, то цикл бы повторялся (в теории) вечно. На практике, конечно, браузер не позволит такому случиться, он предоставит пользователю возможность остановить «подвисший» скрипт, а JavaScript на стороне сервера придётся «убить» процесс.

    Любое выражение или переменная может быть условием цикла, а не только сравнение: условие while вычисляется и преобразуется в логическое значение.

Например, while (i) – более краткий вариант while (i != 0):

 
let i = 3;
while (i) { // когда i будет равно 0, условие станет ложным, и цикл остановится
  alert( i );
  i--;
}

    Фигурные скобки не требуются для тела цикла из одной строки

    Если тело цикла состоит лишь из одной инструкции, мы можем опустить фигурные скобки {…}:

 
let i = 3;
while (i) alert(i--);
 

Цикл «do…while»

    Проверку условия можно разместить под телом цикла, используя специальный синтаксис do..while:

 
do {
  // тело цикла
} while (condition);
Цикл сначала выполнит тело, а затем проверит условие condition, и пока его значение равно true, он будет выполняться снова и снова.
 
Например:
 
let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);
 

    Такая форма синтаксиса оправдана, если вы хотите, чтобы тело цикла выполнилось хотя бы один раз, даже если условие окажется ложным. На практике чаще используется форма с предусловием: while(…) {…}.

 

Прерывание цикла: break

    Обычно цикл завершается при вычислении условия в false.

    Но мы можем выйти из цикла в любой момент с помощью специальной директивы break.

Например, следующий код подсчитывает сумму вводимых чисел до тех пор, пока посетитель их вводит, а затем – выдаёт:

 
let sum = 0;
 
while (true) {
 
  let value = +prompt("Введите число", '');
 
  if (!value) break; // (*)
 
  sum += value;
 
}
alert( 'Сумма: ' + sum );
 

    Директива break в строке (*) полностью прекращает выполнение цикла и передаёт управление на строку за его телом, то есть на alert.

    Вообще, сочетание «бесконечный цикл + break» – отличная штука для тех ситуаций, когда условие, по которому нужно прерваться, находится не в начале или конце цикла, а посередине или даже в нескольких местах его тела.

 

    Таким образом, мы рассмотрели 3 вида циклов:

  • while – Проверяет условие перед каждой итерацией.
  • do..while – Проверяет условие после каждой итерации.
  • for (;;) – Проверяет условие перед каждой итерацией, есть возможность задать дополнительные настройки.

    Чтобы организовать бесконечный цикл, используют конструкцию while (true). При этом он, как и любой другой цикл, может быть прерван директивой break.

 

Назад