JavaScript для цикла
Пример
Цикл (перебор) блока кода пять раз:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Цикл (перебор) массива для сбора названий автомобилей:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- Цикл начинается с позиции 0 (
let i = 0). - Цикл автоматически увеличивается
iпри каждом запуске. - Цикл работает до тех пор, пока
i < cars.length.
Ниже приведены дополнительные примеры.
Определение и использование
Оператор forопределяет блок кода, который выполняется до тех пор, пока выполняется условие
true.
Примечание
Если вы опускаете оператор 2, вы должны обеспечить разрыв внутри цикла.
В противном случае цикл никогда не закончится. Это приведет к сбою вашего браузера.Смотрите также:
Синтаксис
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Параметры
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
Операторы цикла JavaScript
| Заявление | Описание | |
| ломать | Вырывается из петли | |
| Продолжать | Пропускает значение в цикле | |
| пока | Зацикливает блок кода, пока условие истинно | |
| делать пока | Зацикливает блок кода один раз, а затем, пока условие истинно | |
| за | Зацикливает блок кода, пока условие истинно | |
| для... из | Зацикливает значения любого итерируемого | |
| для ... в | Зацикливает свойства объекта |
Дополнительные примеры
Инициировать несколько значений в первом параметре:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Опустите первые параметры (установите значения перед запуском цикла):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Использование continue— перебрать блок кода, но пропустить значение 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Использовать break- зациклить блок кода, но выйти из цикла, когда i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Опустите второй параметр.
Используйте breakдля выхода из цикла, иначе цикл никогда не закончится, и ваш браузер рухнет:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Цикл по массиву в порядке убывания (отрицательное приращение):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Опустите последний параметр и увеличьте значения внутри цикла:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Зациклите NodeList и измените цвет всех элементов p в списке:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Вложенный цикл (цикл внутри цикла):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Поддержка браузера
forявляется функцией ECMAScript1 (ES1).
ES1 (JavaScript 1997) полностью поддерживается во всех браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |