Оператор цикла for
Пять раз выполнить цикл (перебрать) блок кода:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Попробуйте сами »
Прокручивать (перебирать) массив для сбора названий автомобилей:
const cars = ["БМВ", "Вольво", "Сааб", "Форд"];
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) {
блок кода, который необходимо выполнить
}
Параметры
| Параметр | Описание |
|---|---|
| statement 1 | Oнеобязательно. Выполняется до запуска блока кода. Обычно используется для инициализации переменной-счетчика. Чтобы указать несколько значений, разделите каждое значение запятой. Этот параметр можно опустить, но не точку с запятой ";" |
| statement 2 | Oнеобязательно. Условие запуска блока кода. Если он возвращает true, цикл начнется заново, в противном случае цикл завершится.Этот параметр можно опустить, но не точку с запятой ";" |
| statement 3 | Oнеобязательно. Выполняется после блока кода. Обычно используется для увеличения переменной счетчика. Этот параметр можно опустить (например, для увеличения/уменьшения значений внутри цикла) |
JavaScript Операторы цикла
| Оператор | Описание | |
|---|---|---|
| break | Вырывается из цикла | |
| continue | Пропускает значение в цикле | |
| while | Зацикливает блок кода, пока условие true | |
| do...while | Зацикливает блок кода один раз, а затем, пока условие true | |
| for | Зацикливает блок кода, пока условие true | |
| for...of | Зацикливает значения любой итерации | |
| for...in | Зацикливает свойства объекта |
Ещё примеры
Инициализировать несколько значений в первом параметре:
const cars = ["БМВ", "Вольво", "Сааб", "Форд"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Попробуйте сами »
Пропустите первые параметры (задайте значения до начала цикла):
const cars = ["БМВ", "Вольво", "Сааб", "Форд"];
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 = ["БМВ", "Вольво", "Сааб", "Форд"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Попробуйте сами »
Пройти по массиву в порядке убывания (отрицательное приращение):
const cars = ["БМВ", "Вольво", "Сааб", "Форд"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Попробуйте сами »
Пропустите последний параметр и увеличьте значения внутри цикла:
const cars = ["БМВ", "Вольво", "Сааб", "Форд"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Попробуйте сами »
Прокрутите NodeList и измените цвет всех p элементов в списке:
const myNodelist = document.getElementsByTagИмя("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 | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |