JavaScript Цикл For
Циклы могут выполнять блок кода несколько раз.
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 (инструкция 1; инструкция 2; инструкция 3) {
// блок кода, который должен быть выполнен
}
Инструкция 1 выполняется (один раз) перед выполнением блока кода.
Инструкция 2 определяет условие выполнения блока кода.
Инструкция 3 выполняется (каждый раз) после выполнения блока кода.
Из приведенного выше примера вы можете прочитать:
Инструкция 1 устанавливает переменную до начала цикла (let i = 0).
Инструкция 2 определяет условие для запуска цикла (i должно быть меньше чем 5).
Инструкция 3 увеличивает значение (i++) каждый раз, когда выполняется блок кода в цикле.
Инструкция 1
Обычно вы будете использовать инструкцию 1 для инициализации переменной, используемой в цикле (let 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 вернёт true, цикл начнется заново, если он вернёт false, цикл завершится.
Если вы опустите инструкцию 2, вы должны сделать обрыв внутри цикла. В противном случае цикл никогда не закончится. Это приведёт к сбою вашего браузера. Прочтите об обрывах в следующей главе этого учебника на нашем сайте W3Schools на русском.
Инструкция 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++) {
// какой-то код
}
// Здесь i является 10
Попробуйте сами »
Использование let в цикле:
Пример
let i = 5;
for (let i = 0; i < 10; i++) {
// какой-то код
}
// Здесь i является 5
Попробуйте сами »
В первом примере с использованием var, переменная, объявленная в цикле, повторно объявляет переменную вне цикла.
Во втором примере с использованием let, переменная, объявленная в цикле, не объявляет повторно переменную вне цикла.
When let используется для объявления переменной i в цикле, переменная i будет видна только внутри цикла. .
Циклы For/Of и For/In
Цикл for/in и цикл for/of поясняются в следующей главе.
Циклы While
Циклы while и do/while поясняются в следующих главах.
