JavaScript для цикла
Циклы могут выполнять блок кода несколько раз.
Циклы JavaScript
Циклы удобны, если вы хотите запускать один и тот же код снова и снова, каждый раз с другим значением.
Часто это бывает при работе с массивами:
Вместо того, чтобы писать:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
Ты можешь написать:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Различные виды петель
JavaScript поддерживает различные виды циклов:
for
- перебирает блок кода несколько разfor/in
- перебирает свойства объектаfor/of
- перебирает значения итерируемого объектаwhile
- перебирает блок кода, пока заданное условие истинноdo/while
- также перебирает блок кода, пока заданное условие выполняется
Цикл For
Цикл for
имеет следующий синтаксис:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Оператор 1 выполняется (один раз) перед выполнением блока кода.
Оператор 2 определяет условие выполнения блока кода.
Оператор 3 выполняется (каждый раз) после выполнения блока кода.
Пример
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Из приведенного выше примера вы можете прочитать:
Оператор 1 устанавливает переменную до начала цикла (пусть i = 0).
Оператор 2 определяет условие запуска цикла (i должно быть меньше 5).
Оператор 3 увеличивает значение (i++) каждый раз, когда блок кода в цикле выполняется.
Заявление 1
Обычно вы будете использовать оператор 1 для инициализации переменной, используемой в цикле (пусть i = 0).
Это не всегда так, JavaScript это не волнует. Утверждение 1 является необязательным.
Вы можете инициировать много значений в операторе 1 (разделенные запятой):
Пример
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
И вы можете опустить оператор 1 (например, когда ваши значения устанавливаются до начала цикла):
Пример
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Заявление 2
Часто оператор 2 используется для оценки состояния исходной переменной.
Это не всегда так, JavaScript это не волнует. Утверждение 2 также является необязательным.
Если оператор 2 возвращает истину, цикл начинается снова, если он возвращает ложь, цикл завершается.
Если вы опускаете оператор 2, вы должны обеспечить разрыв внутри цикла. В противном случае цикл никогда не закончится. Это приведет к сбою вашего браузера. Читайте о перерывах в следующей главе этого руководства.
Заявление 3
Часто оператор 3 увеличивает значение начальной переменной.
Это не всегда так, JavaScript это не волнует, а оператор 3 является необязательным.
Оператор 3 может делать что угодно, например отрицательное приращение (i--), положительное приращение (i = i + 15) или что-то еще.
Утверждение 3 также можно опустить (например, когда вы увеличиваете свои значения внутри цикла):
Пример
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Объем цикла
Использование var
в цикле:
Пример
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Использование let
в цикле:
Пример
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
В первом примере с использованием var
переменная, объявленная в цикле, повторно объявляет переменную вне цикла.
Во втором примере с использованием let
переменная, объявленная в цикле, не повторно объявляет переменную вне цикла.
Когда let
используется для объявления переменной i в цикле, переменная i будет видна только внутри цикла.
Циклы For/Of и For/In
Цикл for/in
и for/of
петля объясняются в следующей главе.
Пока циклы
Цикл while
и the do/while
объясняются в следующих главах.