Циклы - простой способ сделать какое-то действие несколько раз. Эта глава руководства 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 , который считает количество выбранных жанров в списке прокрутки (элемент , который позволяет выбрать несколько элементов). Цикл 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 < 3 становится ложным, поэтому цикл прерывается.
Пример 2Избегайте бесконечных циклов. Убедитесь, что условие цикла в итоге станет ложным; иначе, цикл никогда не прервётся. Выражения в следующем цикле while будут выполняться вечно, т.к. условие никогда не станет ложным:
While (true) { console.log("Hello, world"); }
Метка (label)Метка представляет собой оператор с индентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы break или continue , чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.
Синтаксис метки следующий:
Метка: оператор
Значение метки может быть любым корректным JavaScript индентификатором, не являющимся зарезервированным словом. Оператор , указанный вами после метки может быть любым выражением.
ПримерВ этом примере, метка markLoop обозначает цикл while .
MarkLoop: while (theMark == true) { doSomething(); }
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 с оператором 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" }
Циклы предназначены для многократного выполнения одних и тех же инструкций.
На языке JavaScript существует 4 вида циклов:
Синтаксис цикла for:
For (инициализация; условие; финальное выражение) { /* тело цикла */ }
Рассмотрим пример цикла, который выведет в консоль числа от 1 до 9:
Var i; // Цикл for от 1 до 9, с шагом 1 for (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, то это число не будет выводиться в браузере.
Цикл for - наиболее используемый вариант организации цикла в JavaScript.
Его конструкция выглядит так:
For (начало; условие; шаг) { /* тело цикла */ }
Всё на самом деле просто. Давайте рассмотри пример:
Var i; for (i = 1; i
В этом примере:
Выполняется шаг цикла номер:" + "
"); (выводить на экран сообщение)Пошаговый алгоритм выполнения этого цикла for, более детально:
Если тело цикла состоит из одной инструкции, то фигурные скобки {...} ставить не обязательно.
Переменная i после завершения цикла не исчезает. Она продолжает существовать и её значение после завершения цикла будет равно 6.
Давайте обощим эти данные в новом примере:
Var i; for (i = 1; i
Тут для создания тела цикла фигурные скобки не использовались.
Фигурные скобки {...} образуют блок в JavaScript - это одна из консрукций языка. То есть, если после оператора цикла for стоят фигурные скобки, это значит что обработчик JavaScript должен выполнить весь блок JavaScript.
Аналогично блоку, в цикле for можно указать функцию. Вот пример:
For (var i = 1; i
Но вот при объявлении функции фигурные скобки {...} обязательны. Их отсутствие приведёт к ошибке.
Обратите внимание, в этом цикле переменная i объявлена в начале цикла: for (var i = 1 ; i
Пропуск частей forВообще, начало цикла можно и не прописывать:
Var i = 1; for (; i
Видите, в начале цикла просто точка с запятой, а цикл нормально работает.
Также можно убрать шаг:
Var i = 1; for (; i
Этот цикл for превратился в аналог цикла while (i
В условие можно поставить выражение, изменяющее переменную.
For (i = 10; i--;) { document.write("
Выполняется шаг цикла: " + i + ".
"); }Так как интерпретатор JavaScript когда ожидает получить логическое значение, любое значение приводит к логическому типу, то когда в результате очередного дикремента переменная i станет равной 0 (ложь), цикл остановится.
Безконечный цикл forДа, да, я знаю что правильно писать бесконечный:)
Итак, цикл будет безконечный, если условие всегда будет истиной. Вот пример:
For (var i = 1; i
В этом примере переменная i будет уменьшаться и никогда не станет больше пяти. Цикл будет выполняться вечно. Попробуйте запустить этот скрипт. У меня Хром "задумался" и ничего не выдал на экран, а продолжал думать и думать.
Будте внимательны и избегайте случайного создания безконечных циклов.
Прерывание цикла forДля прерывания цикла for, как и для прерывания любого другого цикла, используется команда break . Когда обработчик JavaScript обнаруживает команду break в теле цикла, он останавливает выполнения цикла и начинает выполнять инструцкии сценария, следующие за циклом. если такие имеются.
В следующем примере мы остановим цикл на третьей итерации (третьем шаге).
For (var i = 1; i
Немного усложним примерВыполним только 100 итераций безконечного цикла.
Var $counter = 1; for (var i = 1; i
Следующая итерация: continueКоманда continue завершает текущую итерацию и начинает выполнять следующую.
Директива continue «младшая сестра» директивы break, она останавливает только итерацию, а не весь цикл.
For (var i = 1; i
Цикл ниже использует continue , чтобы выводить нечетные значения:
For (var i = 0; i
Конечно, нечётные значения можно вывести при помощи такого цикла без директивы continue :
For (var i = 0; i
Директивы break / continue в операторе "?"Давайте кратко опишем оператор вопросительный знак "? ". Он похож на конструкцию if .
Логическая конструкция:
If (условие) { a(); } else { b(); }
Работает также, как и код с оператором "? ".
Условие? a() : b(); var i = 2; document.write("
Часть 1.
"); if (i == 2) document.write("Условие сработало.
"); else document.write("Условие не сработало.
"); document.write("Часть 2.
"); i == 2 ? document.write("Условие сработало.
") : document.write("Условие не сработало.
");Так вот, важно , нельзя использовать break/continue справа от оператора "? "
В JavaScript синтаксические конструкции, не возвращающие значений, запрещено использовать в операторе "? ".
Нижний пример не рабочий, в нём содержится ошибка:
For (var i = 0; i
Метки для break / continueИногда возникает необходимость создавать вложенные циклы. В таком случае во время работы вложенного цикла может возникнуть необходимость остановить родительский цикл или остановить итерацию родительского цикла. Для этого используются метки.
Вы можете применять метки для обозначения циклов, чтобы затем при помощи break или continue выходить из цикла или продолжать работу цикла с новой итерации.
Метки - единственный способ для команд break и continue повлиять на выполнение внешнего цикла.
Инструкция метки (англ. label) используется только вместе с break или continue для альтернативного выхода из цикла.
Метка имеет синтаксис "имя:", имя метки должно быть уникальным. Метка ставится перед циклом, в той же строке или с переносом строки.
Аналогично можно в этом месте использовать директиву break . Но в случае её использования, как вы понимаете, выполнение циклов прекратится.
Var i, j; metka1: for (i = 0; i
В языке JavaScript нет оператора goto , как в PHP, возможно использовать только метки с break или continue .
Метки редко используются при программировании на JavaScript, так как считается что они делают код сложнее в чтении ипонимании. При кодировании рекомендуется использовать функции.