Операторы условия и цикла в javascript примеры. JavaScript - Циклы

|

Поскольку while и do…while основаны на условиях, они выполняются, когда заданный оператор оценивается как true. Оператор for также основан на условиях, но он предоставляет дополнительные функции, такие как счетчик цикла, позволяющий заранее установить количество итераций цикла.

Данный мануал научит вас использовать циклы for, for…of и for…in, которые являются неотъемлемыми элементами программирования в JavaScript.

Циклы for

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

Рассмотрим синтаксис цикла.

for (инициализация; условие; финальное выражение) {
// код, который нужно выполнить
}

  • Инициализация (если указано) запускает счетчик и объявляет переменные.
  • Далее обрабатывается условие. Если оно истинно, программа выполнит последующий код; если оно ложно, цикл прервется.
  • Затем обрабатывается код, который нужно выполнить.
  • Если указано финальное выражение, оно обновляется, после чего цикл возвращается к обработке условия.

Чтобы понять, как это работает, рассмотрим базовый пример.


for (let i = 0; i < 4; i++) {
// Print each iteration to the console
console.log(i);
}

Если запустить этот код, вы получите такой результат:

0
1
2
3

В приведенном выше примере цикл for начинается с переменной let i = 0, которая запустит цикл со значения 0. В цикле задано условие i < 4, а это означает, что до тех пор, пока значение i меньше 4, цикл будет продолжать работу. Финальное выражение i++ определяет счетчик для каждой итерации цикла. console.log(i) выводит числа, начиная с 0, и останавливается, как только i равняется 4.

Без цикла код, выполняющий те же действия, был бы таким:

// Set initial variable to 0
let i = 0;
// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

Без цикла блок кода состоит из большего количества строк. Чтобы увеличить количество чисел, пришлось бы внести в код еще больше строк.

Давайте рассмотрим каждое выражение в цикле.

Инициализация

Первое выражение в цикле – инициализация.

Оно объявляет переменную i с помощью ключевого слова let (также можно использовать ключевое слово var) и присваивет ей значение 0. Вы можете использовать в циклах любые имена переменных, но переменная i ассоциируется со словом «итерация» (iteration) и не перегружает код.

Условие

Как и циклы while и do…while, циклы for обычно имеют условие. В данном примере это:

Это значит, что выражение оценивается как истинное, пока значение i меньше 4.

Финальное выражение

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

В данном примере цикл увеличивает переменную на единицу. Выражение i++ делает то же самое, что и i = i + 1.

В отличие от начала и условия, финальное выражение не заканчивается точкой с запятой.

Тело цикла

Теперь вы знаете все компоненты цикла for. Взглянем на код еще раз.

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
console.log(i);
}

Первое выражение задает исходное значение переменной (0), второе определяет условие (цикл выполняется, пока i меньше 4), а третье – задает шаг каждой итерации (в данном случае значение будет увеличиваться на 1).

Консоль будет выводить значения: 0, 1, 2 и 3. Затем цикл прервется.

Опциональные выражения

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


let i = 0;
// Initialize the loop
for (; i < 4; i++) {
console.log(i);
}
0
1
2
3

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

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

Также для примера можно убрать из цикла условие. Чтобы цикл остановился после того, как значение переменной станет больше 3, используйте if и break.

// Declare variable outside the loop
let i = 0;
// Omit initialization and condition
for (; ; i++) {
if (i > 3) {
break;
}
console.log(i);
}
0
1
2
3

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

Также из цикла можно удалить финальное выражение. Шаг можно указать в конце кода цикла. При этом нужно обязательно оставить в скобках оба символа «;», иначе цикл не будет работать.

// Declare variable outside the loop
let i = 0;
// Omit all statements
for (; ;) {
if (i > 3) {
break;
}
console.log(i);
i++;
}
0
1
2
3

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

Изменение массивов

Цикл for можно использовать для изменения массивов.

В следующем примере показано, как создать пустой массив и заполнить его переменными с помощью счетчика цикла. Создайте файл modifyArray.js и добавьте в него такой код:

// Initialize empty array
let arrayExample = ;
// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
// Update array with variable value
arrayExample.push(i);
console.log(arrayExample);
}

Запустите программу. Она выведет:

[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

Заданный цикл выполняется до тех пор, пока i < 3 перестанет быть истинным. Массив arrayExample выводится в консоль в конце каждой итерации. Так вы можете увидеть, как массив пополняется новыми значениями.

Длина массива

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

// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];
// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
// Print each item to the console
console.log(fish[i]);
}

Такая программа выдаст результат:

flounder
salmon
pike

Этот цикл перебирает каждый индекс массива с помощью fish[i]. Это приводит к динамическому обновлению индекса при каждой итерации.

Основная цель в JavaScript while — повторно запускать определенный фрагмент кода, снова и снова. Он очень похож на цикл for с одним важным отличием. Позвольте мне занять немного вашего времени, чтобы объяснить разницу между этими двумя типами циклов.

В чем разница между циклами while и for?

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

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

В while все происходит по-другому. Цикл while JavaScript выполняется, пока истинно определенное условие. После того, как условие расценивается как ложное, тогда цикл while прекращается.

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

Плюсы и минусы цикла while

Позвольте мне начать с рассмотрения единственного существенного «минуса » цикла while . Он может работать вечно!

Если окажетесь в ситуации, когда цикл while продолжит выполняться до бесконечности, то ваша программа застрянет (или зависнет ). Тогда нужно закрыть браузер, чтобы прервать выполнение кода JavaScript .

Должен отметить, что неуправляемый в JavaScript while loop обычно не работает вечно. Потому что, как программисты мы всегда обязаны удостовериться, что в какой-то момент условие нашего цикла while станет false .

Теперь относительно «плюсов » — они весьма очевидны. While будет непрерывно работать до тех пор, пока выполняется условие. В качестве примера использования цикла while можно привести запрос к пользователю ввести данные. Цикл будет предлагать ввести данные снова и снова, пока пользователь не введет корректные данные.

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

Синтаксис циклов for и while очень похож.

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

Вот, как должен выглядеть код:

while () { // вставьте сюда код, который должен выполняться циклично }

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

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

Пример цикла while

Предположим, что мы хотим попросить пользователя ввести число от 1 до 10. Но что произойдет, если он введет неправильное число?

В этом случае мы должны попросить его снова ввести значение, и проверить, соблюдено ли условие (введено ли число от 1 до 10 ).

Это случай, в котором цикл for с треском бы провалился. Потому что мы не можем заранее знать, сколько раз нам придется попросить пользователя ввести корректное число. В таком случае к нам на помощь приходит цикл while .

Вот как может выглядеть наш код:

var theNumber = prompt("Пожалуйста, введите число от 1 до 10."); while (theNumber < 1 || theNumber > 10 || isNaN(theNumber)) { theNumber = prompt("Введено неправильное значение, пожалуйста, введите число от 1 до 10!"); } alert("Отлично! Вы ввели число: " + theNumber);

Стоит отметить, что в приведенном выше примере у нас используется три отдельных условия в цикле while JavaScript .

Вот эти три условия: theNumber 10 || isNaN(theNumber) . Они указывают следующее:

  • ЕСЛИ theNumber меньше 1, ИЛИ;
  • ЕСЛИ theNumber больше 10, ИЛИ;
  • ЕСЛИ theNumber — это НЕ число, то продолжить цикл.

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

Только в том случае, если все три условия оцениваются как false , общее условие цикла while будет оценено, как false , и он будет остановлен.

Заключение

JavaScript while loop является единственным реальным циклом в языках программирования. for является просто частной разновидностью цикла while .

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

var counter = 0; while (counter < 10) { counter = counter + 1; console.log("The counter is currently at: " + counter); }

Код будет повторяться ровно 10 раз, не больше и не меньше. Это в точности так, работает цикл for .

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

Его конструкция выглядит так:

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

Всё на самом деле просто. Давайте рассмотри пример:

Var i; for (i = 1; i

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

  • Начало цикла : i = 1 (начиная со значения i = 1)
  • Условие цика : i
  • Шаг цикла : i++ (при каждом шаге цикла i увеличивать на 1)
  • Тело цикла : document.write("

    Выполняется шаг цикла номер:" + "

    "); (выводить на экран сообщение)

Пошаговый алгоритм выполнения этого цикла for, более детально:

  1. Начало цикла: переменной i присваивается значение 1. Эта часть цикла выполняется один раз.
  2. Проверяется условие цикла (i 5) - конец цикла.
  3. Выполняется тело цикла.
  4. Выполняется шаг цикла. В шашем случае i++. Он всегда выполняется после тела цикла.
  5. Возвращение на пункт 2.

Если тело цикла состоит из одной инструкции, то фигурные скобки {...} ставить не обязательно.

Переменная 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, так как считается что они делают код сложнее в чтении ипонимании. При кодировании рекомендуется использовать функции.

Циклы

Чтобы понять действие условных операторов, мы предлагали представить их в виде разветвлений на дороге, по которой двигается интерпретатор 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 раз. То, без использования цикла, во первых это займёт много времени и во вторых, это будет смотреться не очень красиво. Поэтому циклы нужно знать на отлично , потому что они используются очень и очень часто.

В программировании существуют четыре цикла, это 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 + "

"); // i = 101

Цикл 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 + "

"); //summa = 64

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

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

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