Циклы используются для повторного выполнения одного и того же блока кода, если выполняется определенное условие. Основная идея цикла состоит в том, чтобы автоматизировать повторяющиеся задачи в программе, чтобы сэкономить время и усилия. JavaScript поддерживает пять различных типов циклов:
- while — перебирает блок кода, пока указанное условие оценивается как
true
. - do…while — перебирает блок кода один раз; после условие проверяется. Если условие истинно, инструкция повторяется до тех пор, пока указанное условие не становится ложным.
- for — перебирает блок кода, пока счетчик не достигнет указанного числа.
- for…in — просматривает свойства объекта.
- for…of — перебирает итерируемые объекты, такие как массивы, строки и т. д.
Рассмотрим каждый цикл подробнее.
Цикл while
Это самое простое зацикливание в JavaScript.
Цикл while
проходит по блоку кода до тех пор, пока указанное условие оценивается как true
. Как только условие не выполняется, цикл останавливается. Общий синтаксис цикла while:
while(condition) {
// Code to be executed
}
В следующем примере определяется цикл, который будет продолжать работать до тех пор, пока переменная i
меньше или равна 5. Переменная i
будет увеличиваться на 1 при каждой итерации цикла:
var i = 1;
while(i <= 5) {
document.write("<p>The number is " + i + "</p>");
i++;
}
Убедитесь, что условие, указанное в вашем цикле, в конечном итоге становится ложным. В противном случае цикл никогда не прекратит итерации; это называется бесконечным циклом. Еще одна распространенная ошибка — забыть увеличивать значение счетчика (в нашем случае это переменная i
).
Цикл do…while
Цикл do-while
является вариантом цикла while
, который проверяет условие в конце каждой итерации цикла. В цикле do-while
блок кода выполняется один раз, а затем условие проверяется, если условие истинно (true
), оператор повторяется до тех пор, пока указанное условие не становится ложным (false
). Общий синтаксис цикла do-while
:
do {
// Code to be executed
}
while(condition);
Код JavaScript в следующем примере определяет цикл, который начинается с i=1
. Затем он распечатает выходные данные и увеличит значение переменной i
на 1. После этого условие будет проверено и цикл продолжит работать, пока переменная i
меньше или равна 5.
var i = 1;
do {
document.write("<p>The number is " + i + "</p>");
i++;
}
while(i <= 5);
Какая разница между циклами while и do…while
Цикл while
имеет одно существенное отличие от цикла do-while
— с циклом while
условие проверяется в начале каждой итерации цикла, поэтому, если условное выражение имеет значение false
, цикл не будет выполнен.
С другой стороны, в цикле do-while
цикл всегда будет выполняться один раз, даже если условное выражение оценивается как ложное, поскольку в отличие от цикла while
условие проверяется в конце итерации цикла, а не в начале.
Цикл for
Цикл for
повторяет блок кода, пока выполняется определенное условие. Обычно он используется для выполнения блока кода определенное количество раз. Его синтаксис:
for(initialization; condition; increment) {
// Code to be executed
}
Параметры оператора цикла for
имеют следующие значения:
- инициализация (initialization) — используется для инициализации переменных счетчика и безоговорочно вычисляется один раз перед первым выполнением тела цикла.
- условие (condition) — оно оценивается в начале каждой итерации. Если значение равно
true
, операторы цикла выполняются. Если оно оценивается какfalse
, выполнение цикла заканчивается. - инкремент (increment) — он обновляет счетчик цикла новым значением при каждой итерации.
В следующем примере определяется цикл, который начинается сi=1
. Цикл будет продолжаться до тех пор, пока значение переменной i
не станет меньше или равно 5. Переменная i
будет увеличиваться на 1 при каждом запуске цикла:
for(var i=1; i<=5; i++) {
document.write("<p>The number is " + i + "</p>");
}
Цикл for
особенно полезен для итерации по массиву. В следующем примере показано, как распечатать каждый элемент массива JavaScript.
// Массив с некоторыми элементами
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// Перебираем все элементы в массиве
for(var i=0; i<fruits.length; i++) {
document.write("<p>" + fruits[i] + "</p>");
}
Цикл for…in
Цикл for-in
— это специальный тип цикла, который перебирает свойства объекта или элементов массива. Общий синтаксис цикла for-in
:
for(variable in object) {
// Code to be executed
}
Счетчик цикла, т.е. переменная в цикле for-in
, является строкой, а не числом. Она содержит имя текущего свойства или индекс текущего элемента массива.
В следующем примере показано, как перебрать все свойства объекта JavaScript.
// Объект с некоторыми свойствами
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// Перебираем все свойства объекта
for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
Точно так же вы можете перебирать элементы массива:
// Массив с некоторыми элементами
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// Перебираем все элементы в массиве
for(var i in fruits) {
document.write("<p>" + fruits[i] + "</p>");
}
Цикл for-in
не должен использоваться для итерации по массиву, где важен порядок индекса. Вам лучше использовать цикл for
с числовым индексом.
Цикл for…of
ES6 представляет новый цикл for-of
, который позволяет очень легко перебирать массивы или другие итерируемые объекты (например, строки). Кроме того, код внутри цикла выполняется для каждого элемента итерируемого объекта.
В следующем примере показано, как перебирать массивы и строки с помощью этого цикла.
// Перебираем массив
let letters = ["a", "b", "c", "d", "e", "f"];
for(let letter of letters) {
console.log(letter); // a,b,c,d,e,f
}
// Перебираем строки
let greet = "Hello World!";
for(let character of greet) {
console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}
Чтобы узнать о других функциях ES6, ознакомьтесь с Руководством по функциям ES6 в JavaScript.
Цикл for...of
не работает с объектами, потому что они не повторяются. Если вы хотите перебрать свойства объекта, вы можете использовать цикл for-in
.