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

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

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

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

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.