Руководство по циклам в JavaScript

Циклы используются для повторного выполнения одного и того же блока кода, если выполняется определенное условие. Основная идея цикла состоит в том, чтобы автоматизировать повторяющиеся задачи в программе, чтобы сэкономить время и усилия. 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++;
}

Цикл 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…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.