Циклы JavaScript. Javascript циклы while, do-while и for

Циклы - простой способ сделать какое-то действие несколько раз. Эта глава руководства JavaScript Guide познакомит вас с различными операторами доступными в JavaScript.

Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры "Иди 5 шагов на восток" может быть выражена в виде цикла:

Var step; for (step = 0; step < 5; step++) { // Запускается 5 раз, с шагом от 0 до 4. console.log("Идём 1 шаг на восток"); }

Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз (не забывайте про нулевой раз повторения, отсчёт в массиве начинается с 0). Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще.

Операторы предназначеные для организации циклов в JavaScript:

Цикл for

Цикл for повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор for в JavaScript аналогичен оператору for в Java и C. Объявление оператора for выглядит следующим образом:

For ([начало]; [условие]; [шаг]) выражения

При его выполнении происходит следущее:

Выполняется выражение начало, если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.

Выполняется условие. Если условие истинно, то выполняются выражения. Если оно ложно, цикл for прерывается. Если же условие полностью пропущено, то оно считается истинным.

Выполняются выражения. Чтобы выполнить несколько выражений, используются блок-выражение { ... } для группировки выражений.

Обновляется шаг, если он есть, а затем управление возвращается к шагу 2.

Пример

В следующей функции есть цикл for , который считает количество выбранных жанров в списке прокрутки (элемент , который позволяет выбрать несколько элементов). Цикл for объявляет переменную i и задаёт ей значение 0. Также он проверяет, что i меньше количества элементов в элементе , выполняет оператор if и увеличивает i на один после каждого прохода цикла.

Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже: R&B Jazz Blues New Age Classical Opera

function howMany(selectObject) { var numberSelected = 0; for (var i = 0; i < selectObject.options.length; i++) { if (selectObject.options[i].selected) { numberSelected++; } } return numberSelected; } var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ alert("Выбрано элементов: " + howMany(document.selectForm.musicTypes)) });

Цикл do...while

Цикл do...while повторяется пока заданное условие истинно. Оператор do...while имеет вид:

Do выражения while (условие);

выражения выполняются пока условие истинно. Чтобы использовать несколько выражений, используйте блок-выражение { ... } , чтобы сгруппировать их. Если условие истинно, выражения выполнятся снова. В конце каждого прохода условие проверяется. Если условие ложно, выполнение приостанавливается и управление передаётся выражению после do...while .

Пример

В следующем примере, цикл do выполнится минимум 1 раз и запускается снова, пока i меньше 5.

Do { i += 1; console.log(i); } while (i < 5);

Цикл while

Цикл while выполняет выражения пока условие истинно. Выглядит он так:

While (условие) выражения

Если условие становится ложным, выражения в цикле перестают выполняться и управление переходит к выражению после цикла.

Условие проверяется на истинность до того, как выполняются выражения в цикле. Если условие истинно, выполняются выражения, а затем условие проверяется снова. Если условие ложно, выполнение приостанавливается и управление переходит к выражению после while .

Чтобы использовать несколько выражений, используйте блок выражение { ... } , чтобы сгруппировать их.

Пример 1

Следующий цикл while работает, пока n меньше трёх:

Var n = 0; var x = 0; while (n < 3) { n++; x += n; }

С каждой итерацией, цикл увеличивает n и добавляет это значение к x . Поэтому, x и n получают следующие значения:

• После первого прохода: n = 1 и x = 1
• После второго: n = 2 и x = 3
• После третьего прохода: n = 3 и x = 6

После третьего прохода, условие n < 3 становится ложным, поэтому цикл прерывается.

Пример 2

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

While (true) { console.log("Hello, world"); }

Метка (label)

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

Синтаксис метки следующий:

Метка: оператор

Значение метки может быть любым корректным JavaScript индентификатором, не являющимся зарезервированным словом. Оператор , указанный вами после метки может быть любым выражением.

Пример

В этом примере, метка markLoop обозначает цикл while .

MarkLoop: while (theMark == true) { doSomething(); }

break

Используйте оператор break , чтобы прерывать цикл, переключать управление или в сочетании с оператором метка.

• Когда вы используете break без метки, он прерывает циклы while , do-while и for или сразу переключает управление к следующему выражению.
• Когда вы используете break с меткой, он прерывает специально отмеченное выражение.

Синтаксис оператора может быть таким:

break;

break Метка ;

Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.

Пример 1

Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение - theValue:

For (i = 0; i < a.length; i++) { if (a[i] == theValue) { break; } }

Пример 2: Прерывание метки var x = 0; var z = 0 labelCancelLoops: while (true) { console.log("Внешний цикл: " + x); x += 1; z = 1; while (true) { console.log("Внутренний цикл: " + z); z += 1; if (z === 10 && x === 10) { break labelCancelLoops; } else if (z === 10) { break; } } } continue

Оператор continue используется, чтобы шагнуть на шаг вперёд в циклах while , do-while , for или перейти к метке.

• Когда вы используете continue без метки, он прерывает текущую итерацию циклов while , do-while и for и продолжает выполнение цикла со следующей итерации. В отличие от break , continue не прерывает выполнение цикла полностью. В цикле while он прыгает к условию. А в for увеличивает шаг.
• Когда вы используете continue с меткой, он применяется к циклу с этой меткой.

Синтаксис continue может выглядеть так:

continue;

continue Метка ;

Пример 1

Следующий пример показывает цикл while с оператором continue , который срабатывает, когда значение i равно 3. Таким образом, n получает значения 1, 3, 7 и 12.

Var i = 0; var n = 0; while (i < 5) { i++; if (i == 3) { continue; } n += i; }

Пример 2

Выражение, отмеченное checkiandj содержит выражение отмеченное checkj . При встрече с continue , программа прерывает текущую итерацию checkj и начинает следующую итерацию. Каждый раз при встрече с continue , checkj переходит на следующую итерацию, пока условие возвращает false . Когда возвращается false , после вычисления остатка от деления checkiandj , checkiandj переходит на следующую итерацию, пока его условие возвращает false . Когда возвращается false , программа продолжает выполнение с выражения после checkiandj .

Если у continue проставлена метка checkiandj , программа может продолжиться с начала метки checkiandj .

Checkiandj: while (i < 4) { console.log(i); i += 1; checkj: while (j > 4) { console.log(j); j -= 1; if ((j % 2) != 0) { continue checkj; } console.log(j + " чётное."); } console.log("i = " + i); console.log("j = " + j); }

for...in

Оператор for...in проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства. Цикл for...in выглядит так:

For (variable in object) { выражения }

Пример

Следующая функция берёт своим аргументом объект и его имя. Затем проходит по всем свойствам объекта и возвращает строку, которая содержит имена свойств и их значения.

Function dump_props(obj, obj_name) { var result = ""; for (var i in obj) { result += obj_name + "." + i + " = " + obj[i] + "
"; } result += ""; return result; }

Для объекта car со свойствами make и model , результатом будет :

Car.make = Ford car.model = Mustang

Пример №2

Также, по ключу можно выводить значение:

Let obj = {model: "AUDI A8", year: "2019", color: "brown"} for (key in obj) { console.log(`${key} = ${obj}`); } // model = AUDI A8 // year = 2019 // color = brown

Массивы

Хотя, очень заманчиво использовать for...in как способ пройтись по всем элементам Array , этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный for для числовых индексов при взаимодействии с массивами, поскольку оператор for...in проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.

For (variable of object ) { выражения }

Следующий пример показывает разницу между циклами for...of и for...in . Тогда как for...in проходит по именам свойств, for...of проходит по значениям свойств:

Let arr = ; arr.foo = "hello"; for (let i in arr) { console.log(i); // выводит "0", "1", "2", "foo" } for (let i of arr) { console.log(i); // выводит "3", "5", "7" }

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

Содержит определённый код, который прокручивается многократно. Существует несколько видов циклов: for , while и do-while .

Начнём с самого первого цикла (и самого популярного) - цикла for . Общий вид этого цикла таков:

For (переменная_итерации = начальное_значение; условие; действие_после_каждой_итерации) {
//код программы
}

Давайте прокомментирую то, что здесь написано. Вначале идёт - переменная итерации . Это обычное имя переменной для итерации. Дальше идёт начальное_значение . Собственно, название говорит само за себя. Дальше идёт условие, при выполнении которого (то есть возвращается true ) цикл запускается ещё один раз, и, наконец, действие, которое выполняется после каждой итерации. Как правило, это изменение переменной для итерации.

Давайте с Вами напишем простой скрипт, который будет выводить количество итераций цикла:

For (i = 0; i < 100; i++)
document.write(i + " ");

Здесь мы задали переменную для итерации (называется i ), которой присвоили значение 0 . Дальше проверяется условие: i < 100 . Если оно выполняется, то выполняется одна итерация цикла. После выполнения каждой итерации происходит i++ (то есть увеличение переменной i на 1 ). Снова проверяется условие, и если оно истинно, то выполняется ещё одна итерация. И так до тех пор, пока условие i < 100 не станет ложным. Очевидно, что оно будет ложно лишь через 100 итераций. Таким образом, данный цикл будет выполняться 100 раз, что мы можем увидеть, если запустим этот скрипт. И ещё кое-что. Так как у нас здесь выполняется всего один оператор (document.write() ), то наличие фигурных скобок необязательно. Если у Вас 2 и более операторов крутятся в цикле, то тогда необходимо их поставить.

Теперь поговорим о второй разновидности циклов в JavaScript - while . В принципе, цикл очень похож на for (хотя все циклы похожи). Но здесь общий вид другой:

While (условие) {
//код программы
}

Как видите, здесь нет ни переменной для итерации, ни каких-либо действий после итерации. Отсюда следует вывод: чтобы выйти из цикла необходимо в самом цикле сделать так, чтобы "условие " стало ложным. Если это не сделать, то произойдёт зацикливание, а, следовательно, Ваш скрипт повиснет.

Давайте реализуем такую же задачу, как и раньше, но используя цикл while .

Var i = 0;
while (i < 100) {
i++;
document.write(i + " ");
}

Перед началом цикла мы создали переменную i , которой присвоили начальное значение. Затем перед запуском цикла проверяется условие, и если оно истинно, то запускается итерация цикла, в которой мы увеличиваем переменную для итерации (иначе произойдёт зацикливание). И выводим эту переменную.

И, наконец, последний вид циклов в JavaScript - цикл do-while . Синтаксис такой:

Do {
//код программы
} while (условие)

Очень похож на цикл while , однако, здесь есть всего одно, но очень принципиальное отличие. Если цикл while сначала проверяет условие, а потом уже выполняет или нет итерацию. То цикл do-while сначала именно выполняет итерацию, и только потом проверяет условие. И если оно ложно, то выходит из цикла. Другими словами, независимо от условия данный цикл гарантированно выполнится хотя бы 1 раз. Думаю, что данный код будет излишним, но всё же.

Var i = 0;
do {
i++;
document.write(i + " ");
} while (i < 100)

Пояснять код не буду, уверен, Вы из без меня с ним разберётесь. Поэтому я лучше перейду к двум интересным операторам: break и continue .

Начнём с break . Данный оператор позволяет досрочно выскочить из цикла. Давайте с Вами напишем такой код:

For (i = 0; i < 100; i++) {
if (i == 50) break;
document.write(i + " ");
}

Вы можете запустить этот скрипт и обнаружите, что вывелись только числа до 49 , так как при i = 50 цикл прервался, благодаря оператору break .

Теперь рассказываю об операторе continue . Данный оператор позволяет перейти к следующей итерации цикла. Чтобы не расписывать здесь много, лучше сразу покажу пример:

For (i = 0; i < 100; i++) {
if (i == 50) continue;
document.write(i + " ");
}

Если Вы запустите этот скрипт, то увидите, что не хватает числа 50 . Это произошло потому, что при i = 50 , мы переходим к следующей итерации цикла, перед которой i увеличивается на 1 и становится равным 51-му .

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

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

Если будет такая задача, например, вывести на экран строку "всем привет" 1000 раз. То, без использования цикла, во первых это займёт много времени и во вторых, это будет смотреться не очень красиво. Поэтому циклы нужно знать на отлично , потому что они используются очень и очень часто.

В программировании существуют четыре цикла, это while, do-while, for и foreach . Каждый из них имеет свой синтаксис и каждый используется в определённых случаях.

Чаще всего используются циклы for и foreach, затем while, а цикл do-while встречается очень редко.

И начнём мы с цикла while.

Синтаксис цикла while следующий:

Сначала объявляем переменную i, которая является счётчиком и внутри цикла мы этот счётчик инкрементируем. Внутри круглых скобок пишем условие входа/выхода из цикла.

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

Для примера выведем строку "Всем привет!" 10 раз.

Var i = 0; while(i "); i++; }

Переменная i, может начаться как с 0 так и с 1 или с другого любого числа.

Условие выхода является в тоже время и условием входа. Цикл работает следующим образом: Сначала проверяется если переменная i, меньше 10, и если условие истина, то мы входим в цикл, иначе, нет. В данном случае если переменная i будет равна 30, например, то цикл не выполнится, потому что 30 не меньше 10.

Зашли цикл, вывели строчку "Всем привет", инкрементировали счётчик и опять переходим к условию, где опять проверяем если значение переменной i, меньше 10, то мы входим в цикл, иначе выходим из него. И так происходит до того момента когда условие входа станет лож, то есть значение переменной i будет 10. 10 не меньше 10, поэтому мы уже не входим в цикл, а идём дальше.

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

С циклом while разобрались, теперь перейдём к циклу do-while.

Синтаксис цикла do-while следующий:

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

Замечание! Как и у цикла while, не забудьте инкрементировать счётчик i.

Перейдём к практике. Для примера посчитаем произведение чисел от 1 до 10.

Var i = 1; var production = 1; do{ production *= i; i++; }while(i

Результатом будет число 3628800. На первом шаге мы сразу вошли в цикл, несмотря на его условие, где выполнилось операция production *= i (это тоже самое что и production = production * 1). Потом инкрементируем счётчик. После инкрементации он имеет значение 2. И в конце проверяем условие, если значение счётчика меньше либо равно 10, то мы идём к следующей итерации цикла, иначе мы выходим из цикла и идём дальше.

Цикл for

Как я уже написал выше цикл for, встречается достаточно часто, поэтому его нужно знать очень хорошо.

Синтаксис цикла for следующий:

Для лучшего понимания решим простую задачу. Допустим нам нужно посчитать сумму чисел от 1 до 1000 с помощью цикла for.

Var summa = 0; for(var i = 1; i

Сохраняем документ, открываем его в браузере и видим, что результат равен 500500.

Замечание! Если в цикле находится только одни оператор, то фигурные скобки использовать необязательно.

Для демонстрации выведем на экран 5 раз, какую то строку, например " Здравствуйте! ".

For(var i = 1; i

Замечание! После выполнения цикла в переменной i, остаётся последнее значение.

Теперь решим задачу чуть по сложнее, например нам нужно вывести строку "Привет" 100 раз. И для того чтобы это все не вывелось в один ряд, то после каждой 10-ой итерации, перейдём на новую строку. И в конце выведем значение переменной i.

For(var i = 1; i 10) break; document.write(array[i] + "
"); }

Данный цикл перебирает все элементы массива, однако последние четыре элемента не будут выведены в браузере, поскольку поверка if (array[i] > 10) прервет выполнение цикла с помощью оператора break, когда перебор массива дойдет до элемента 12.

Если нам надо просто пропустить итерацию, но не выходить из цикла, мы можем применять оператор continue :

Var array = [ 1, 2, 3, 4, 5, 12, 17, 6, 7 ]; for (var i = 0; i < array.length; i++) { if (array[i] > 10) continue; document.write(array[i] + "
"); }

В этом случае, если программа встретит в массиве число, больше 10, то это число не будет выводиться в браузере.

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

JavaScript предлагает программистам несколько разновидностей циклов . Рассмотрим их подробнее.

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

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

Цикл со счетчиком записывается так:

for (; ; )

Здесь используется ключевое слово for. Поэтому такие циклы часто называют "циклами for".

Выражение инициализации выполняется самым первым и всего один раз. Оно присваивает особой переменной, называемой счетчиком цикла, некое начальное значение (обычно 1). Счетчик цикла подсчитывает, сколько раз было выполнено тело цикла - собственно код, который нужно выполнить определенное количество раз.

Следующий шаг - проверка условия. Оно определяет момент, когда выполнение цикла прервется и начнет выполняться следующий за ним код. Как правило, условие сравнивает значение счетчика цикла с его граничным значением. Если условие возвращает true, выполняется тело цикла, в противном случае цикл завершается и начинается выполнение кода, следующего за циклом.

После прохода тела цикла выполняется выражение приращения, изменяющее значение счетчика. Это выражение обычно инкрементирует счетчик (увеличивает его значение на единицу). Далее снова проверяется условие, выполняется тело цикла, приращение и т. д., пока условие не станет равно false.

Пример цикла со счетчиком:

for (i = 1; i < 11; i++) {
a += 3;
b = i * 2 + 1;
}

Этот цикл будет выполнен 10 раз. Мы присваиваем счетчику i начальное значение 1 и после каждого выполнения тела цикла увеличиваем его на единицу. Цикл перестанет выполняться, когда значение счетчика увеличится до 11, и условие цикла станет ложным.

Счетчик цикла можно записать в одном из выражений тела цикла, как это сделали мы. В нашем случае счетчик i будет содержать последовательно возрастающие значения от 1 до 10, которые используются в вычислениях.

Приведем еще два примера цикла со счетчиком:

for (i = 10; i > 0; i--) {
a += 3;
b = i * 2 + 1;
}

Здесь значение счетчика декрементируется. Начальное его значение равно 10. Цикл выполнится 10 раз и завершится, когда счетчик i будет содержать 0; при этом значения последнего будут последовательно уменьшаться от 10 до 1.

for (i = 2; i < 21; i += 2) b = i * 2 + 1;

А в этом примере начальное значение счетчика равно 2, а конечное - 21, но цикл выполнится, опять же, 10 раз. А все потому, что значение счетчика увеличивается на 2 и последовательно принимает значения 2, 4, 6... 20.

Цикл с постусловием

Цикл с постусловием во многом похож на цикл со счетчиком: он выполняется до тех пор, пока остается истинным условие цикла. Причем условие проверяется не до, а после выполнения тела цикла, отчего цикл с постусловием и получил свое название. Такой цикл выполнится хотя бы один раз, даже если его условие с самого начала ложно.

Формат цикла с постусловием:

do

while ();

Для задания цикла с постусловием предусмотрены ключевые слова do и while, по-этому такие циклы часто называют "циклами do-while".

Вот пример цикла с постусловием:

do {
a = a * i + 2;
++i;
} while (a < 100);

А вот еще один пример:

var a = 0, i = 1;
do {
a = a * i + 2;
++i;
} while (i < 20);

Хотя здесь удобнее был бы уже знакомый нам и специально предназначенный для таких случаев цикл со счетчиком.

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

Цикл с предусловием отличается от цикла с постусловием тем, что условие проверяется перед выполнением тела цикла. Так что, если оно (условие) изначально ложно, цикл не выполнится ни разу:

while ()

Для создания цикла с постусловием предусмотрено ключевое слово while. Поэтому такие циклы называют еще "циклами while" (не путать с "циклами do-while"!).

Пример цикла с предусловием:

while (a < 100) {
a = a * i + 2;
++i;
}

Прерывание и перезапуск цикла

Иногда бывает нужно прервать выполнение цикла. Для этого JavaScript предоставляет Web-программистам операторы break и continue.

Оператор прерывания break позволяет прервать выполнение цикла и перейти к следующему за ним выражению:

while (a < 100) {
a = a * i + 2;
if (a > 50) break;
++i;
}

В этом примере мы прерываем выполнение цикла, если значение переменной a превысит 50.

Оператор перезапуска continue позволяет перезапустить цикл , т. е. оставить невыполненными все последующие выражения, входящие в тело цикла, и запустить выполнение цикла с самого его начала: проверка условия, выполнение приращения и тела и т. д.

Пример:

while (a < 100) {
i = ++i;
if (i > 9 && i < 11) continue;
a = a * i + 2;
}

Здесь мы пропускаем выражение, вычисляющее a , для всех значений i от 10 до 20.