jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180

Руководство по циклам в 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++;
}

Убедитесь, что условие, указанное в вашем цикле, в конечном итоге становится ложным. В противном случае цикл никогда не прекратит итерации; это называется бесконечным циклом. Еще одна распространенная ошибка — забыть увеличивать значение счетчика (в нашем случае это переменная 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.

flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

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

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

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

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

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

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

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

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

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

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

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