Циклы while, for в JavaScript

Оцените материал
(0 голосов)

Здравствуйте! В этом уроке рассмотрим такое понятие в программировании как циклы. Иногда возникают задачи, когда надо повторить то или иное действие много раз, то есть зациклить. Например вывести список фамилий пользователей или года рождений в  выпадающем списке в форме регистрации. Вот как раз для этих и других задач, где надо повторять действия многократно и предусмотрены циклы. О них мы и поговорим.

Циклы в JavaScript

 

 

Цикл с предусловием while

И первый у нас  очереди это цикл while он используется редко и  имеет следующий вид:

while (условие) {
 // код, тело цикла
}

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

Например, цикл будет выводить  i пока i < 6:

var i = 0; //задаем начально значение для переменной счетчика цикла
while (i < 6) { //условие выполнения цикла
  alert( i );
  i++;//приращение  счетчика цикла
}

Каждый раз, когда тело цикла  повторяется - называется итерацией цикла. В данном примере происходит 6 итераций цикла или 6 повторений.

Если операции приращения i++ нет то цикл выполняется вечно и при этом браузер зависает и авапийно закрывается. Поэтому здесь следует быть очень внимательным и следить за тем чтобы было условие выхода из цикла.

Условие в скобках возвращает логическое значение и примет false, как только i=0. Вот как в примере.

var i = 6;
while (i) { // при i=0, значение в скобках вернет false и цикл завершится
  alert( i );
  i--;
}

Цикл c постусловием  do…while

Рассмотрим разновидность цикла while, когда условие выхода из цикла  находится  под телом самого  цикла:

do {
  // тело цикла
} while (условие);

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

Например:

var i = 0;
do {
  alert( i );
  i++;
} while (i < 6);

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

Цикл for

Этот цикл используется чаще всего.

for (начало; условие; шаг) {
  // ... тело цикла ...
}

Пример цикла, который выполняет alert(i) для i от 0 до 5 включительно:

for (var i = 0; i < 6; i++) {
  alert( i );
}

Здесь:

  • Начальное значение: i=0.
  • Условие выхода из цикла: i<6.
  • Шаг цикла: i++.
  • Тело цикла: alert(i) это код внутри фигурных скобок

Цикл будет работать следующим образом:

  1. Начальное значение : i=0 выполняется при заходе в цикл.
  2. Условие выхода из цикла: i<6 проверяется перед каждым шагом цикла и при входе в цикл, если возвращает ложь то происходит выход из цикла.
  3. Тело цикла: alert(i).
  4. Шаг цикла: i++ выполняется после тела цикла на каждом шаге, но перед проверкой условия цикла.

Другими словами, алгоритм выполнения: начало → (если условие → тело → шаг) → (если условие → тело → шаг) → … и так далее, пока верно условие.

Пропуск частей цикла for

Любая часть цикла  for может быть пропущена. Но лучше этого не делать, особенно для начинающих.

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

var i = 0;
for (; i < 6; i++) {
  alert( i ); // 0, 1, 2
}

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

var i = 0;
for (; i < 6;) {
  alert( i );
  // цикл при этом превратился в аналог while (i<6)
}

Ну и конечно можно убрать всё, при этом цикл превратится в бесконечный цикл:

for (;;) {
  // будет выполняться вечно
}

Но точки с запятой ; обязательно должны быть.

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

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

Иногда требуется выйти из цикла до того как основное условие  выхода  из цикла вернет false. Для этого используется оператор break. Мы уже сталкивались с ним, когда рассматривали конструкцию switch ... case.

Например, прервать выполнение цикла на 3 шаге:

for(var i=0; i<6;i++){
alert(i);
 if(i==3){
  break;
 }
}

В этом примере выполнятся шаги цикла 0,1,2 а потом срабатывает условие в блоке if и происходит выход из цикла.

Оператор continue

Этот оператор используется, тогда когда требуется пропустить шаг цикла. Например надо вывести все числа от1 до 10, кроме 5.

for (var i = 0; i < 10; i++) { 
if (i == 5) continue; 
alert(i); }
Здесь, когда значение i будет 5, то эта операция будет пропущена и не выведется.

Итоги.

В JavaScript поддерживается  3 вида циклов:

  • while – проверка условия перед каждым шагом цикла. Это цикл с предусловием
  • do..while – проверка условия после каждого выполнения цикла. Это цикл с постусловием.
  • for –  проверяет условие после каждого выполнения, а также содержит дополнительные настройки.

Для того чтобы создать бесконечный цикл используется конструкция while(true). Если надо заранее прервать цикл используется оператор break. А вот ежели вам надо пропустить шаг выполнения цикла, то для этого подойдет continue.

Задания.

Что будет в результате выполнения этого кода

var i = 4;
while (i) {
  alert( i-- );
}

Какие значения переменной  i выведет  этот цикл?

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

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

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

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

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

Выведите нечетные числа от 2 до 20.

При помощи цикла for выведите чётные числа от 2 до 20.

Замените for на while

Замените цикл for на while.

 
for (var i = 0; i < 8; i++) {
 alert( "цифра " + i + "!" );
}

Вывести все простые числа в диапозоне от 1 до 10.

Натуральное число, большее 1, называется простым, если оно ни на что не делится, кроме как на себя и 1. Вам надо найти такие числа в диапозоне от 1 до 10 и вывести их. Даю подсказку надо использовать условные операторы вместе с циклом.
 
На закрепление материала посмотрите виде про циклы в Javascript.
 

 

 

Прочитано 373 раз Последнее изменение Воскресенье, 27 августа 2017 06:08
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+