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

Цикл while

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

Выражение в круглых скобках называется условием выполнения цикла или кратко условием . Сначала вычисляется значение выражения. Полученное значение, если необходимо, неявно преобразуется к булеву типу. Если результатом вычисления выражения является значение true , то инструкция, расположенная в теле цикла, выполняется, затем управление передаётся в начало цикла и условие вычисляется снова. Если результатом вычисления выражения является значение false , интерпретатор завершает работу цикла и переходит к выполнению инструкции следующей за циклом. Таким образом, интерпретатор снова и снова выполняет код расположенный в теле цикла, пока условие остаётся истинным:

Var i = 0; while (i < 3) { // Выполнять код, пока значение переменной i меньше 3 alert("i: " + i); i++; // Увеличиваем значение переменной i }

Цикл do-while

Синтаксис цикла do-while:

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

Var count = 0; do { document.write(count + " "); count++; } while(count < 5); Попробовать »

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

Цикл for

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

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

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

Пример цикла for:

For (var count = 0; count < 5; count++) document.write(count + " "); Попробовать »

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

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

Var i = 0; for (; i < 4; i++) ... var i = 0; for (; i < 4;) ... for (var i = 1; /* нет условия */ ; i++) ... // Это эквивалентно следующему коду for (var i = 1; true; i++) ...

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

// не выполнится, так как в проверке условия последнее выражение false for (i = 1; i < 4, false; i++) ... for (var i = 1, j = 5; i <= 5; i++, j--) document.write(i + " " + j +"
"); Попробовать »

Цикл for-in

Цикл for-in используется для перебора в случайном порядке перечисляемых свойств объекта и имеет следующий синтаксис:

For (переменная in объект) инструкция;

Слева от ключевого слова in указывается имя переменной, которой перед началом каждой итерации цикла присваивается в виде строки имя одного из свойств объекта. Справа от ключевого слова in указывается объект, свойства которого будут перебираться циклом. Цикл будет выполняться до тех пор, пока не будут перебраны все доступные свойства. Если переменная, представляющая объект, будет иметь значение null или undefined цикл не выполнится ни разу:

Var obj = {x: 5, y: 10}; for (var prop in obj) { alert(prop); }

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

Последнее обновление: 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, то это число не будет выводиться в браузере.

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

Зачем это нужно - представьте, что вам нужно возвести в квадрат 100 элементов массива. Если обращаться к каждому элементу отдельно по его ключу - это займет 100 строчек кода, и для того, чтобы написать этого код, нужно будет потратить довольно много времени.

Но это не нужно - у нас есть возможность сделать так, чтобы JavaScript за нас выполнил некоторую операцию нужное количество раз . Например, возвел все элементы массива в квадрат.

Делается это с помощью циклов .

Цикл while

Цикл while будет выполняться до тех пор, пока верно (истинно) выражение, переданное ему параметром. Смотрите синтаксис:

While (пока выражение истинно) { выполняем этот код циклически; в начале каждого цикла проверяем выражение в круглых скобках } /* Цикл закончится, когда выражение перестанет быть истинным. Если оно было ложным изначально - то он не выполнится ни разу! */

В принципе, цикл while может выполняться бесконечно (но это приведет к зависанию скрипта!), достаточно передать ему выражение, которое никогда не станет ложным . Например, так:

Давайте последовательно выведем с помощью цикла while числа от одного до пяти:

Var i = 0; //счетчик цикла while (i < 5) { /* С помощью оператора ++ увеличиваем i на единицу при каждом проходе цикла. */ i++; alert(i); }

Обратите внимание на переменную i – она является так называемым счетчиком цикла . Счетчики используются для того, чтобы подсчитывать, сколько раз выполнился цикл. Кроме того, они выполняют вспомогательную роль - в нашей задаче мы использовали счетчик, чтобы вывести цифры от 1 до 5.

Для счетчиков принято использовать буквы i , j и k .

Цикл for

Цикл for является альтернативой while . Он более сложен для понимания, но чаще всего его любят больше, чем while за то, что он занимает меньше строчек.

For (начальные команды; условие окончания цикла; команды после прохода цикла) { тело цикла }

Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, пример: i = 0 .

Условие окончания цикла - пока оно истинное , цикл будет работать, пример: i .

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

Давайте с помощью цикла for выведем последовательно числа от 0 до 9:

/* В начале цикла i будет равно нулю, цикл будет выполнятся пока i < 10, после каждого прохода к i прибавляется единица: */ for (var i = 0; i < 10; i++) { alert(i); //выведет 0, 1, 2... 9 }

Цикл без тела

Фигурные скобки в циклах можно не указывать - в этом случае цикл выполнит только одну строку под ним (не рекомендую так делать, часто приводит к ошибкам):

For (var i = 0; i < 10; i++) //<--- точки с запятой нет alert(i); //выведет 0, 1, 2... 9

А вот если после ) поставить точку с запятой - цикл закроется и следующая строка в него не попадет, получится так называемый цикл без тела, который в нашем случае просто прокрутится и в результате изменит значение переменной i :

For (var i = 0; i < 10; i++); //<--- точка с запятой есть alert(i); //выведет 9

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

Несколько команд в цикле for

Если нам необходимо выполнить несколько команд в круглых скобках - указываем их через запятую:

For (var i = 0, j = 2; i

Давайте разберем приведенный цикл: до прохода цикла выполнятся две команды: var i = 0, j = 2 (обратите внимание на то, что var тут пишется один раз), а после каждой итерации - целых три: i++, j++, i = i + j .

Этот пример с точки зрения программирования никакой особой пользы не несет, просто схематически показывает, что так можно делать. Запомните его, в дальнейшем это вам пригодится.

Цикл for для массивов

С помощью цикла for можно последовательно перебрать элементы массива. Делается это следующим образом:

<= arr.length-1; i++) { alert(arr[i]); //выведет 1, 2, 3, 4, 5 }

Ключевым моментом является то, что мы делаем перебор от нуля до длины массива минус 1 (так как номер последнего элемента массива на единицу меньше его длины).

Можно не отнимать единицу, а место <= сделать < :

Var arr = ; for (var i = 0; i < arr.length; i++) { alert(arr[i]); //выведет 1, 2, 3, 4, 5 }

Цикл for-in

Для перебора объекта используется так называемый цикл for-in . Давайте посмотрим, как он работает.

Пусть у нас дан такой объект:

Var obj = {Коля: 200, Вася: 300, Петя: 400};

Давайте выведем его ключи. Для этого используем такую конструкцию: for (key in obj) , где obj - это объект, который мы перебираем, а key - это переменная, в которую последовательно будут ложится ключи объекта (ее название может быть любым, какое придумаете - такое и будет).

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

Итак, вот так мы выведем все ключи объекта (по очереди):

Var obj = {Коля: 200, Вася: 300, Петя: 400}; for (key in obj) { alert(key); //выведет "Коля", "Вася", "Петя" }

Если нам нужны не ключи, а значения, нужно обратиться к нашему объекту по ключу, вот так: obj .

Как это работает: в переменной key сначала будет "Коля", то есть obj в данном случае все равно, что obj["Коля"] , при следующем проходе цикла в переменной key будет "Вася" и так далее.

Итак, выведем все элементы объекта:

Var obj = {Коля: 200, Вася: 300, Петя: 400}; for (key in obj) { alert(obj); //выведет 200, 300, 400 }

Инструкция break

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

Зачем такое может понадобится? Например, перед нами стоит задача выводить элементы массива до тех пор, пока не встретится число 3. Как только встретится - цикл должен завершить свою работу.

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

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

Var arr = ; for (var i = 0; i < arr.length; i++) { if (arr[i] === 3) { break; //выходим из цикла } else { alert(arr[i]); } }

Инструкция continue

Существует также инструкция 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 . Таким образом, в каждой итерации вам доступно свойство объекта или элемент массива.

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

Если будет такая задача, например, вывести на экран строку "всем привет" 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 <= 100; i++){ document.write("привет!"); if(i % 10 == 0)  document.write("
"); } document.write("

Переменная i = " + i + "

Цикл foreach обычно используется для перебора объектов и массивов. Поэтому о нем я расскажу в статье описывающая работу с массивами.

Оператор break предназначен для того чтобы принудительно выйти из цикла.

Оператор continue позволяет прервать текущую итерацию цикла, и перейти к следующей.

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

Var summa = 0; for(var i = 1; i <= 20; i++){ //Пропускаем текущею итерацию цикла if(i % 2 == 0) continue; summa += i; //Выходим совсем из цикла. if(i == 15) break; document.write(i + ". Итерация
"); } document.write("

summa = " + summa + "

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

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

На этом заканчивается эта статья. Теперь Вы знаете синтаксис циклов while, do-while, for и как с ними работать . Также познакомились с операторами break и continue .