Циклы while, for Выполнение скриптов на стороне

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

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

Для многократного повторения одного участка кода - предусмотрены циклы.

Цикл `while`

Цикл while имеет вид:

while (условие) {

  // код, тело цикла

}

Пока условие верно — выполняется код из тела цикла.

Например, цикл ниже выводит i пока i < 3:

   
1
var i = 0;

2
while (i < 3) {

3
  alert(i);

4
  i++;

5
}

Повторение цикла по-научному называется «итерация». Цикл в примере выше совершает три итерации.

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

Бесконечный цикл можно сделать и проще:

while (true) {

  // ...

}

Условие в скобках интерпретируется как логическое значение, поэтому вместо while (i!=0) обычно пишут while (i):

   
1
var i = 3;

2
while (i) { // при i=0 значение в скобках будет false и цикл остановится

3
  alert(i);

4
  i--;

5
}

Цикл `do..while`

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

do {

  // тело цикла

} while (условие);

Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.

Например:

   
1
var i = 0;

2
do {

3
  alert(i);

4
  i++;

5
} while (i < 3);

Синтаксис do..while редко используется, т.к. обычный while нагляднее — в нем не приходится искать глазами условие и ломать голову, почему оно проверяется именно в конце.

Важность: 3

Какое последнее значение выведет этот код? Почему?

1
var i = 3;

2
 
3
while(i) {

4
  alert(i--);

5
}

Решение

Ответ: 1.

   
1
var i = 3;

2
 
3
while(i) {

4
  alert(i--);

5
}

Каждое выполнение цикла уменьшает i. Об этом говорит сайт https://intellect.icu . Проверка while(i) даст сигнал «стоп» приi = 0.

Соответственно, шаги цикла:

1
var i = 3

2
alert(i--); // выведет 3, затем уменьшит i до 2

3
 
4
alert(i--) // выведет 2, затем уменьшит i до 1

5
 
6
alert(i--) // выведет 1, затем уменьшит i до 0

7
 
8
// все, проверка while(i) не даст выполняться циклу дальше

[Открыть задачу в новом окне]

Цикл `for`

Чаще всего применяется цикл for. Выглядит он так:

for (начало; условие; шаг) {

 // ... тело цикла ...

}

Например, цикл ниже выводит значения от 0 до 3 (не включая 3):

   
1
var i;

2
 
3
for (i=0; i<3; i++) {

4
  alert(i);

5
}

Начало i=0 выполняется при заходе в цикл.
Условие i<3 проверяется перед каждой итерацией.
Шаг i++ выполняется после каждой итерации, но перед проверкой условия.

В цикле также можно определить переменную:

for (var i=0; i<3; i++) {

  ...

}

Любая часть for может быть пропущена.

Например, можно убрать начало:

var i = 0;

for (; i<3; i++) ...

Можно убрать и шаг:

1
var i = 0;

2
for (; i<3; ) {

3
 // цикл превратился в аналог while (i<3)

4
}

А можно и вообще убрать все, получив бесконечный цикл:

for (;;) {

  // будет выполняться вечно

}

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

for..in

Существует также специальная конструкция for..in для перебора свойств объекта.

Мы познакомимся с ней позже, когда будем говорить об объектах.

Важность: 4

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

Префиксный вариант

var i = 0;

while (++i < 5) alert(i);
Постфиксный вариант

var i = 0;

while (i++ < 5) alert(i);

Решение

От 1 до 4

1 var i = 0;

2 while (++i < 5) alert(i);

Первое значение: i=1, так как операция ++i сначала увеличит i, а потом уже произойдет сравнение и выполнение alert.
Далее 2,3,4.. Значения выводятся одно за другим. Для каждого значения сначала происходит увеличение, а потом — сравнение, так как ++ стоит перед переменной.

При i=4 произойдет увеличение i до 5, а потом сравнение while(5 < 5) — это неверно. Поэтому на этом цикл остановится, и значение 5 выведено не будет.
От 1 до 5

1 var i = 0;

2 while (i++ < 5) alert(i);

Первое значение: i=1. Остановимся на нем подробнее. Оператор i++увеличивает i, возвращая старое значение, так что в сравнении i++ < 5 будет участвовать старое i=0.
Но последующий вызов alert уже не относится к этому выражению, так что получит новый i=1.

Далее 2,3,4.. Для каждого значения сначала происходит сравнение, а потом — увеличение, и затем срабатывание alert.

Окончание цикла: при i=4 произойдет сравнение while(4 < 5) — верно, после этого сработает i++, увеличив i до 5, так что значение 5 будет выведено. Оно станет последним.

[Открыть задачу в новом окне]

Важность: 4

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

Постфиксная форма:

for(var i=0; i<5; i++) alert(i);
Префиксная форма:

for(var i=0; i<5; ++i) alert(i);

Решение

Ответ: от 0 до 4 в обоих случаях.

`1`	`for(var` `i=0; i<5; ++i) alert(i);`

2

`3`	`for(var` `i=0; i<5; i++) alert(i);`

Такой результат обусловлен алгоритмом работы for:

Выполнить присвоение i=0
Проверить i<5
Если верно - выполнить тело цикла alert(i), затем выполнить i++

Увеличение i++ выполняется отдельно от проверки условия (2), значение i при этом не используется, поэтому нет никакой разницы между i++ и ++i.

[Открыть задачу в новом окне]

Важность: 1

Посмотрите страницу tutorial/intro/source/loop.html.

Перепишите код, заменив цикл for на while, без изменения поведения цикла.

Решение

tutorial/intro/loop.html.

[Открыть задачу в новом окне]

Важность: 5

Напишите цикл, который предлагает prompt ввести число, большее 100. Если посетитель ввел другое число — попросить ввести еще раз, и так далее.

Цикл должен спрашивать число пока либо посетитель не введет число, большее 100, либо не нажмет кнопку Cancel (ESC).

Предполагается, что посетитель вводит только числа.

Пример работы.

Решение

Решение:

1
var num;

2
 
3
do {

4
  num = prompt("Введите число больше 100?", 0);

5
} while(num <= 100 && num != null);

В действии: tutorial/intro/endless_loop.html

Цикл do..while повторяется, пока верны две проверки:

Проверка num <= 100 — то есть, введенное число все еще меньше 100.
Проверка num != null — значение null означает, что посетитель нажал «Отмена», в этом случае цикл тоже нужно прекратить.

Кстати, сравнение num <= 100 при вводе null даст true, так что вторая проверка необходима.

К сожалению, в одной статье не просто дать все знания про циклы while for. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое циклы while for и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Циклы while, for

Цикл `while`

Цикл `do..while`

Цикл `for`

Комментарии

Оставить комментарий

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Циклы while, for

Цикл while

Цикл do..while

Цикл for

Комментарии

Оставить комментарий

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Цикл `while`

Цикл `do..while`

Цикл `for`