Основная цель в 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 .
Не нужно бояться использовать JavaScript while . Так как без него множество приложений просто не работали бы должным образом!
Я надеюсь, вам понравилась эта статья.
Перевод статьи «While Loop in 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 . Таким образом, в каждой итерации вам доступно свойство объекта или элемент массива.
|Поскольку 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]. Это приводит к динамическому обновлению индекса при каждой итерации.
Цикл for - наиболее используемый вариант организации цикла в JavaScript.
Его конструкция выглядит так:
For (начало; условие; шаг) { /* тело цикла */ }
Всё на самом деле просто. Давайте рассмотри пример:
Var i; for (i = 1; i
В этом примере:
- Начало цикла : i = 1 (начиная со значения i = 1)
- Условие цика : i
- Шаг цикла : i++ (при каждом шаге цикла i увеличивать на 1)
- Тело цикла
: document.write("
Выполняется шаг цикла номер:" + "
"); (выводить на экран сообщение)
Пошаговый алгоритм выполнения этого цикла for, более детально:
- Начало цикла: переменной i присваивается значение 1. Эта часть цикла выполняется один раз.
- Проверяется условие цикла (i 5) - конец цикла.
- Выполняется тело цикла.
- Выполняется шаг цикла. В шашем случае i++. Он всегда выполняется после тела цикла.
- Возвращение на пункт 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, так как считается что они делают код сложнее в чтении ипонимании. При кодировании рекомендуется использовать функции.
