Циклы могут выполнять блок кода несколько раз.
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>";
Вы можете написать проще:
var i;
for (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) {
// блок кода, который нужно выполнить
}
Оператор 1 выполняется (один раз) перед выполнением блока кода
Оператор 2 определяет условие выполнения блока кода.
Оператор 3 выполняется (каждый раз) после выполнения блока кода.
for (i = 0; i < 5; i++) {
text += "Число является " + i + "<br>";
}
Попробуйте сами »
Из приведенного выше примера вы можете прочитать:
Оператор 1 устанавливает переменную перед началом цикла (var i = 0).
Оператор 2 определяет условие запуска цикла я должен быть меньше 5 (i < 5).
Оператор 3 увеличивает значение (i++) каждый раз, когда выполняется блок кода в цикле.
Оператор 1
Обычно вы используете оператор 1 для инициализации переменной, используемой в цикле (i = 0).
Это не всегда так, JavaScript не волнует. Оператор 1 не является обязательным.
Вы можете инициировать множество значений в оператор 1 (разделенных запятыми):
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Попробуйте сами »
И вы можете пропустить оператор 1 (например, когда ваши значения установлены до начала цикла):
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Попробуйте сами »
Оператор 2
Часто оператор 2 используется для оценки состояния исходной переменной.
Это не всегда так, JavaScript не волнует. Оператор 2 также необязателен.
Если оператор 2 вернет true, цикл начнется заново, если он вернет false, цикл завершится.
Если вы пропустите оператор 2, вы должны указать break (прерывание) внутри цикла. В противном случае цикл будет постоянно повторяттся и никогда не закончится. Это приведёт к зависанию браузера. Читайте о прерываниях в следующих главах этого руководства.
Оператор 3
Часто оператор 3 увеличивает значение начальной переменной.
Это не всегда так, JavaScript все равно, и оператор 3 необязателен.
Оператор 3 может делать что угодно, например отрицательное приращение (i--), положительное приращение (i = i + 15) или что-то еще.
Оператор 3 также можно пропустить (например, когда вы увеличиваете значения внутри цикла):
var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Попробуйте сами »
Цикл for/in
JavaScript оператор for/in перебирает свойства объекта:
var person = {fname:"Щипунов", lname:"Андрей", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}
Попробуйте сами »
Цикл for/of
JavaScript оператор for/of перебирает значения итерируемых объектов.
Цикл for/of позволяет перебирать итерируемые структуры данных, такие как массивы, строки, карты, списки узлов Node и т.д.
Цикл for/of имеет следующий синтаксис:
for (variable of iterable) {
// блок кода будет выполняться
}
variable - Для каждой итерации переменной присваивается значение следующего свойства. Переменная может быть объявлена с const, let, или var.
iterable - Объект, имеющий итерируемые свойства.
Цикл массива
var cars = ["БМВ", "Вольво", "Мини"];
var x;
for (x of cars) {
document.write(x + "<br >");
}
Попробуйте сами »
Цикл строк
var txt = "JavaScript";
var x;
for (x of txt) {
document.write(x + "<br >");
}
Попробуйте сами »
Цикл while (в то время, как)
Цикл while и do/while будет объяснен в следующей главе.