Javascript прерывание цикла. Javascript циклы while, do-while и for

Последнее обновление: 08.04.2018

Циклы позволяют в зависимости от определенных условий выполнять некоторое действие множество раз. В JavaScript имеются следующие виды циклов:

for..in

for..of

while

do..while

Цикл for

Цикл for имеет следующее формальное определение:

For ([инициализация счетчика]; [условие]; [изменение счетчика]){ // действия }

Например, используем цикл for для перебора элементов массива:

Var people = ["Tom", "Alice", "Bob", "Sam"]; for(var i = 0; i

Первая часть объявления цикла - var i = 0 - создает и инициализирует счетчик - переменную i. И перед выполнением цикла ее значение будет равно 0. По сути это то же самое, что и объявление переменной.

Вторая часть - условие, при котором будет выполняться цикл. В данном случае цикл будет выполняться, пока значение i не достигнет величины, равной длине массива people. Получить длину массива можно с помощью свойства length: people.length .

Третья часть - приращение счетчика на единицу.

И так как в массиве 4 элемента, то блок цикла сработает 4 раза, пока значение i не станет равным people.length (то есть 4). И каждый раз это значение будет увеличиваться на 1. Каждое отдельное повторение цикла называется итерацией. Таким образом, в данном случае сработают 4 итерации.

А с помощью выражения people[i] мы сможем получить элемент массива для его последующего вывода в браузере.

Необязательно увеличивать счетчик на единицу, можно производить с ним другие действия, например, уменьшать на единицу:

Var people = ["Tom", "Alice", "Bob", "Sam"]; for(var i = people.length - 1; i >= 0; i--){ console.log(people[i]); }

В данном случае массив выводится с конца, а перебор массива начинается с i = 3 до i = 0.

for..in

Цикл for..in предназначен для перебора массивов и объектов. Его формальное определение:

For (индекс in массив) { // действия }

Например, переберем элементы массива:

Var people = ["Tom", "Alice", "Bob", "Sam"]; for(var index in people){ console.log(people); }

Цикл for...of

Цикл for...of похож на цикл for...in и предназначен для перебора коллекций, например, массивов:

Let users = ["Tom", "Bob", "Sam"]; for(let val of users) console.log(val);

Текущий перебираемый элемент коллекции помещается в переменную val, значение которой затем выводится на консоль.

Цикл while

Цикл while выполняется до тех пор, пока некоторое условие истинно. Его формальное определение:

While(условие){ // действия }

Опять же выведем с помощью while элементы массива:

Var people = ["Tom", "Alice", "Bob", "Sam"]; var index = 0; while(index < people.length){ console.log(people); index++; }

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

do..while

В цикле do сначала выполняется код цикла, а потом происходит проверка условия в инструкции while. И пока это условие истинно, цикл повторяется. Например:

Var x = 1; do{ console.log(x * x); x++; }while(x < 10)

Здесь код цикла сработает 9 раз, пока x не станет равным 10. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.

Операторы continue и break

Иногда бывает необходимо выйти из цикла до его завершения. В этом случае мы можем воспользоваться оператором break :

< array.length; i++) { if (array[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. Циклы можно представить как разворот на дороге, возвращающий обратно, который заставляет интерпретатор многократно проходить через один и тот же участок программного кода.

В языке JavaScript имеется четыре цикла: while, do/while, for и for/in. Каждому из них посвящен один из следующих подразделов. Одно из обычных применений циклов - обход элементов массива.

Цикл while

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

while (выражение) { инструкция }

Цикл while начинает работу с вычисления выражения. Если это выражение имеет ложное значение, интерпретатор пропускает инструкцию, составляющую тело цикла, и переходит к следующей инструкции в программе. Если выражение имеет истинное значение, то выполняется инструкция, образующая тело цикла, затем управление передается в начало цикла и выражение вычисляется снова. Иными словами, интерпретатор снова и снова выполняет инструкцию тела цикла, пока значение выражения остается истинным. Обратите внимание, что имеется возможность организовать бесконечный цикл с помощью синтаксиса while(true).

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

Кроме того, если изменяемая переменная (или переменные) присутствует в выражении, значение выражения может меняться при каждом проходе цикла. Это важно, т.к. в противном случае выражение, значение которого было истинным, никогда не изменится и цикл никогда не завершится! Ниже приводится пример цикла while, который выводит числа от 0 до 9:

Var count = 0; while (count

Как видите, в начале переменной count присваивается значение 0, а затем ее значение увеличивается каждый раз, когда выполняется тело цикла. После того как цикл будет выполнен 10 раз, выражение вернет false (т.е. переменная count уже не меньше 10), инструкция while завершится и интерпретатор перейдет к следующей инструкции в программе. Большинство циклов имеют переменные-счетчики, аналогичные count. Чаще всего в качестве счетчиков цикла выступают переменные с именами i, j и k, хотя для того чтобы сделать программный код более понятным, следует давать счетчикам более наглядные имена.

Цикл do/while

Цикл do/while во многом похож на цикл while, за исключением того, что выражение цикла проверяется в конце, а не в начале. Это значит, что тело цикла всегда выполняется как минимум один раз. Эта инструкция имеет следующий синтаксис:

do { инструкция } while (выражение);

Цикл do/while используется реже, чем родственный ему цикл while. Дело в том, что на практике ситуация, когда вы заранее уверены, что потребуется хотя бы один раз выполнить тело цикла, несколько необычна. Ниже приводится пример использования цикла do/while:

Function printArray(a) { var len = a.length, i = 0; if (len == 0) console.log("Пустой массив"); else { do { console.log(a[i]); } while (++i

Между циклом do/while и обычным циклом while имеется два отличия. Во-первых, цикл do требует как ключевого слова do (для отметки начала цикла), так и ключевого слова while (для отметки конца цикла и указания условия). Во-вторых, в отличие от цикла while, цикл do завершается точкой с запятой. Цикл while необязательно завершать точкой с запятой, если тело цикла заключено в фигурные скобки.

Цикл for

Цикл for представляет собой конструкцию цикла, которая часто оказывается более удобной, чем цикл while. Цикл for упрощает конструирование циклов, следующих шаблону, общему для большинства циклов. Большинство циклов имеют некоторую переменную-счетчик. Эта переменная инициализируется перед началом цикла и проверяется перед каждой итерацией. Наконец, переменная-счетчик инкрементируется или изменяется каким-либо другим образом в конце тела цикла, непосредственно перед повторной проверкой переменной. Инициализация, проверка и обновление - это три ключевых операции, выполняемых с переменной цикла. Инструкция for делает эти три шага явной частью синтаксиса цикла:

for(инициализация; проверка; инкремент) { инструкция }

Инициализация, проверка и инкремент - это три выражения (разделенных точкой с запятой), которые ответственны за инициализацию, проверку и увеличение переменной цикла. Расположение их в первой строке цикла упрощает понимание того, что делает цикл for, и не позволяет забыть инициализировать или увеличить переменную цикла.

Проще всего объяснить работу цикла for, показав эквивалентный ему цикл while:

инициализация; while(проверка) { инструкция; инкремент; }

Другими словами, выражение инициализации вычисляется один раз перед началом цикла. Это выражение, как правило, является выражением с побочными эффектами (обычно присваиванием). В JavaScript также допускается, чтобы выражение инициализации было инструкцией объявления переменной var, поэтому можно одновременно объявить и инициализировать счетчик цикла.

Выражение проверки вычисляется перед каждой итерацией и определяет, будет ли выполняться тело цикла. Если результатом проверки является истинное значение, выполняется инструкция, являющаяся телом цикла. В конце цикла вычисляется выражение инкремент. Чтобы использование этого выражения имело смысл, оно должно быть выражением с побочными эффектами. Обычно это либо выражение присваивания, либо выражение, использующее оператор ++ или --.

Вывести числа от 0 до 9 можно также с помощью цикла for, как показано ниже, в противовес эквивалентному циклу while, показанному в примере ранее:

For (var count = 0; count

Конечно, циклы могут быть значительно более сложными, чем в этих простых примерах, и иногда в каждой итерации цикла изменяется несколько переменных. Эта ситуация - единственный случай в JavaScript, когда часто применяется оператор «запятая» - он позволяет объединить несколько выражений инициализации и инкрементирования в одно выражение, подходящее для использования в цикле for:

Var i,j; for (i = 0, j = 0; i

Цикл for/in

Цикл for/in использует ключевое слово for, но он в корне отличается от обычного цикла for. Цикл for/in имеет следующий синтаксис:

for (переменная in объект) { инструкция }

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

Для обхода элементов массива естественно использовать обычный цикл for:

Var arr = ; for (var i = 0; i

Инструкция for/in так же естественно позволяет выполнить обход свойств объекта:

// Создадим новый объект var obj = {name:"Alex", password:"12345" }; for (var i in obj) { // Вывести значение каждого свойства объекта console.log(obj[i]); }

Чтобы выполнить инструкцию for/in, интерпретатор JavaScript сначала вычисляет выражение объект. Если оно возвращает значение null или undefined, интерпретатор пропускает цикл и переходит к следующей инструкции. Если выражение возвращает простое значение, оно преобразуется в эквивалентный объект-обертку. В противном случае выражение возвращает объект. Затем интерпретатор выполняет по одной итерации цикла для каждого перечислимого свойства объекта. Перед каждой итерацией интерпретатор вычисляет значение выражения, сохраняет его в переменной и присваивает ему имя свойства (строковое значение).

Очень часто нужно, чтобы определённая часть программы выполнялась много раз. Разумеется, можно просто сделать так: скопировать-вставить и так нужное число раз. Однако, это абсурдно, особенно, если действие надо выполнять, например, 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 . Надеюсь, Вам всё стало ясно. Можете также придумать себе какую-нибудь задачу и решить её. Это будет великолепной тренировкой.

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

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

В JavaScript существуют следующие операторы цикла:

1) for используется когда вы заранее знаете, сколько раз вам нужно что-то сделать;
2) for...in используется для обхода свойств объектов;
3) while используется когда вы не знаете, сколько раз нужно что-то сделать;
4) do...while работает аналогично с оператором while . Отличается тем, что do...while всегда выполняет выражение в фигурных скобках, по крайней мере один раз, даже если проверка условия возвращает false .

Типы циклов в JavaScript, управление циклом

1. Цикл for

Цикл for используется для выполнения итераций по элементам массивов или объектов, напоминающих массивы, таких как arguments и HTMLCollection . Условие проверяется перед каждой итерацией цикла. В случае успешной проверки выполняется код внутри цикла, в противном случае код внутри цикла не выполняется и программа продолжает работу с первой строки, следующей непосредственно после цикла.

Следующий цикл выведет на консоль строчку Hello, JavaScript! пять раз.

For (var i = 0; i < 5; i++) { console.log(i + ": Hello, JavaScript!"); }
Рис. 1. Результат выполнения цикла for на консоли

1.1. Как работает цикл for

Цикл for состоит из трёх разных операций:

Шаг 1. инициализация var i = 0; — объявление переменной-счётчика, которая будет проверяться во время выполнения цикла. Эта переменная инициализируется со значением 0 . Чаще всего в качестве счётчиков цикла выступают переменные с именами i , j и k .

Шаг 2. проверка условия i < 5; — условное выражение, если оно возвращает true , тело цикла (инструкция в фигурных скобках) будет выполнено. В данном примере проверка условия идёт до тех пор, пока значение счётчика меньше 5 .

Шаг 3. завершающая операция i++ — операция приращения счётчика, увеличивает значение переменной var i на единицу. Вместо операции инкремента также может использоваться операция декремента.

По завершении цикла в переменной var i сохраняется значение 1 . Следующий виток цикла выполняется для for (var i = 1; i < 5; i++) { } . Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i < 5; возвращает true .

1.2. Вывод значений массива

Чтобы вывести значения массива с помощью цикла for , нужно задействовать свойство массива length . Это поможет определить количество элементов в массиве и выполнить цикл такое же количество раз.

Приведённый ниже скрипт выведет на экран пять сообщений с названиями цветов:

Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"]; for (var i = 0; i < flowers.length; i++){ alert(flowers[i] + " - это цветок."); }

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

Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"], len = flowers.length; for (var i = 0; i

2. Цикл for...in

Циклы for...in используются для обхода свойств объектов, не являющихся массивами. Такой обход также называется перечислением . При обходе рекомендуется использовать метод hasOwnProperty() , чтобы отфильтровать свойства, которые были унаследованы от прототипа.

Для примера создадим объект с помощью литерала объекта.

Var user = { name: "Alice", age: 25, country: "Russia" }; for (var prop in user) { console.log(prop + ": " + user); }
Рис. 2. Результат выполнения цикла for...in на консоли

Предположим, что в сценарии до или после создания объекта user прототип объекта Object был расширен дополнительным методом clone() .

If (typeof Object.prototype.clone === "undefined") { Object.prototype.clone = function () {}; }

Так как цепочка наследования прототипа постоянно проверяется интерпретатором, то все объекты автоматически получают доступ к новому методу.

Рис. 3. Результат повторного выполнения цикла for...in на консоли

Чтобы избежать обнаружения этого метода в процессе перечисления свойств объекта user , используется метод hasOwnProperty() , который отфильтрует свойства прототипа.

Var user = { name: "Alice", age: 25, country: "Russia" }; if (typeof Object.prototype.clone === "undefined") { Object.prototype.clone = function () {}; } for (var prop in user) { if (user.hasOwnProperty(prop)) { console.log(prop + ": " + user); } }
Рис. 4. Результат перечисления свойств объекта с помощью метода hasOwnProperty()

3. Цикл while

Цикл while - цикл с предварительной проверкой условного выражения. Инструкция внутри цикла (блок кода в фигурных скобках) будет выполняться в случае, если условное выражение вычисляется в true . Если первая проверка даст результат false , блок инструкций не выполнится ни разу.

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

Данный цикл выведет на экран таблицу умножения для числа 3:

Var i = 1; var msg = ""; while (i < 10) { msg+= i + " x 3 = " + (i * 3) + "
"; i++; } document.write(msg);
Рис. 5. Результат выполнения цикла while

4. Цикл do...while

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

Var result = ""; var i = 0; do { i += 1; result += i + " "; } while (i < 5); document.write(result);
Рис. 6. Результат выполнения цикла do...while

В следующем примере операторы внутри цикла выполняются один раз, даже если условие не выполняется.

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

5. Бесконечные циклы

При создании любого цикла можно создать бесконечный цикл, который никогда не завершится. Такой цикл может потенциально продолжать работать до тех пор, пока работает компьютер пользователя. Большинство современных браузеров могут обнаружить это и предложат пользователю остановить выполнение скрипта. Чтобы избежать создания бесконечного цикла, вы должны быть уверены, что заданное условие в какой-то момент вернёт false . Например, следующий цикл задаёт условие, которое никогда не возвращает ложь, так как переменная i никогда не будет меньше 10:

For (var i = 25; i > 10; i++) { document.write("Это предложение будет выводиться бесконечно...
"); }

6. Вложенные циклы

Цикл внутри другого цикла называется вложенным . При каждой итерации цикла вложенный цикл выполняется полностью. Вложенные циклы можно создавать с помощью цикла for и цикла while .

For (var count = 1; count < 3; count++) { document.write(count + ". Строка цикла
"); for (var nestcount = 1; nestcount< 3; nestcount++) { document.write("Строка вложенного цикла
"); } }
Рис. 7. Результат выполнения вложенного цикла for

7. Управление циклом

Циклом можно управлять с помощью операторов break; и continue; .

7.1. Оператор break;

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

Когда оператор break; используется без метки, он позволяет выйти из цикла или из инструкции switch . В следующем примере создаётся счётчик, значения которого должны изменяться от 1 до 99 , однако оператор break прерывает цикл после 14 итераций.

For (var i = 1; i < 100; i++) { if (i == 15) { break; } document.write(i); document.write("
"); }
Рис. 8. Результат работы оператора break в цикле for

Для вложенных циклов оператор break; используется с меткой, с помощью которой завершается работа именованной инструкции. Метка позволяет выйти из любого блока кода. Именованной инструкцией может быть любая инструкция, внешняя по отношению к оператору break; . В качестве метки может быть имя инструкции if или имя блока инструкций, заключенных в фигурные скобки только для присвоения метки этому блоку. Между ключевым словом break; и именем метки не допускается перевод строки.

Outerloop: for(var i = 0; i < 10; i++) { innerloop: for(var j = 0; j < 10; j++) { if (j > 3) break; // Выход из самого внутреннего цикла if (i == 2) break innerloop; // То же самое if (i == 4) break outerloop; // Выход из внешнего цикла document.write("i = " + i + " j = " + j + "
"); } } document.write("FINAL i = " + i + " j = " + j + "
");

7.2. Оператор continue;

Оператор continue; останавливает текущую итерацию цикла и запускает новую итерацию. При этом, цикл while возвращается непосредственно к своему условию, а цикл for сначала вычисляет выражение инкремента, а затем возвращается к условию.

В этом примере на экран будут выведены все чётные числа:

Var i; for(i = 1; i <= 10; i++) { if (i % 2 !== 0) { continue; } document.write("
чётное число = " + i); }
Рис. 9. Результат работы оператора continue в цикле for

Оператор continue; также может применяться во вложенных циклах с меткой.

Outerloop: for (var i = 0; i "); for (var j = 0; j "); } } document.write("Все циклы выполнены"+"
");
Рис. 10. Результат работы оператора continue с меткой

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

На языке JavaScript существует 4 вида циклов:

• Цикл for . Этот цикл используется, когда известно точное количество повторений одних и тех же инструкций.
• Цикл while . Он предназначен для выполнения одних и тех же инструкций до тех пор, пока заданное условие истинно.
• Цикл do...while . Данный цикл аналогичен циклу while , но условие проверяется не перед выполнением повторяющихся инструкций, а после них. Таким образом, в отличие от цикла while , даже если условие изначально ложное, инструкции выполнятся хотя бы один раз.
• Цикл for...in . Он применяется, когда необходимо перебрать все свойства в объекте или каждый элемент в массиве.

Цикл for

Синтаксис цикла for:

For (инициализация; условие; финальное выражение) { /* тело цикла */ }

• инициализация - это выражение, которое выполняется один раз перед выполнением цикла; обычно используется для инициализации счётчика;
• условие - это выражение, истинность которого проверяется перед каждой итерацией; если выражение вычисляется как истина, то выполняется итерация, в противном случае цикл for завершает работу;
• финальное выражение - это выражение, которое выполняется в конце каждой итерации; обычно используется для изменения счетчика;
• тело цикла - инструкции, выполнение которых нужно повторять.

Рассмотрим пример цикла, который выведет в консоль числа от 1 до 9:

Var i; // Цикл for от 1 до 9, с шагом 1 for (i = 1; i <= 9; i++) { console.log(i); }

В этом примере:

• инициализация: i = 1 (присвоение переменной i значения 1);
• условие прекращение цикла: i <= 9 (значение переменной i не меньше 9);
• выражение, которое нужно выполнять в конце каждой итерации: i++ (увеличение значение переменной i на 1);
• инструкция, которую нужно выполнять: console.log(i) (выведение значения счётчика в консоль).

Необязательные части цикла for

В for блок инициализации является не обязательным.

Var i = 1; // Цикл for for (; i <= 9; i++) { console.log(i); }

Блок условия в цикле for тоже является не обязательным. Без условия цикл будет выполняться бесконечное количество раз. В этом случае чтобы его прервать (выйти из цикла) необходимо использовать инструкцию break .

Var i; // Цикл for for (i = 1; ; i++) { if (i > 9) { // условие прерывание цикла break; } console.log(i); }

Финальное выражение в for также является не обязательным. Счётчик цикла в этом случае можно, например, изменять в теле.

Var i; // Цикл for for (i = 1; i <= 9 ;) { console.log(i); i++; }

Можно вообще опустить 3 выражения:

Var i = 1; // Цикл for for (; ;) { if (i > 9) { break; } console.log(i); i++; }

В качестве тела цикла for можно использовать пустое выражение (;).

Например:

Var arrA = , arrB = ; for (i = 0; i < arrA.length; arrB[i] = arrA / 2) ; console.log(arrB); //

Примеры использования for

Использование цикла for для перебора элементов массива:

Var arr = , // массив i = 0, // счетчик lenArr = arr.length; // длина массива for (i; i < lenArr; i++) { console.log(arr[i]); }

Инструкции break и continue

Кроме этого, внутри тела циклов могут использоваться специальные инструкции break и continue .

Оператор break предназначен для прекращения выполнения цикла. Т.е. он осуществляет выход из текущего цикла и передачи управления инструкции, идущей после него.

Оператор continue прерывает выполнение текущей итерации цикла и осуществляет переход к следующей.

Пример, в котором выведим в консоль нечётные числа от 1 до 11:

Var i; for (i = 1; i <= 11; i++) { // если число в переменной i чётное, то переходим к следующей итерации if (i %2 === 0) { continue; } // выведим значение переменной i в консоль console.log(i); } // 1, 3, 5, 7, 9, 11

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

Цикл while выполняет одни и те же инструкции (тело цикла) до тех пор, пока истинно некоторое условие. Истинность условия проверяется перед каждым выполнением тела цикла. Если перед первой итерацией условие ложно, то цикл не выполняется ни разу.

// объявление переменной а и присвоение ей значения 0 var a=0; //цикл while с условием a

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

Цикл do...while , так же как и цикл while , выполняет одни и те же инструкции (тело цикла) до тех пор, пока некоторое условие истинно. Но в отличие от цикла while , в цикле do...while условие проверяется после каждого выполнения тела цикла. Если даже условие изначально ложно, то тело цикла всё равно выполнится один раз (т.к. условие проверяется после выполнения тела цикла).

// объявление переменной а и присвоение ей значения 0 var a=0; //цикл do...while с условием a

Как было отмечено выше, цикл for...in находит применение для перебора элементов массива и свойств объекта. На этом уроке мы рассмотрим только общий синтаксис цикла for...in , а более подробно познакомимся с ним в следующих уроках.

Принцип работы цикла for...in заключается в том, что переменная x принимает все имена свойств объекта y или индексы массива y . Таким образом, в каждой итерации вам доступно свойство объекта или элемент массива.