Циклы могут выполнять блок кода несколько раз.
Циклы удобны, если вы хотите запускать один и тот же код снова и снова. время с другим значением.
Часто это бывает при работе с массивами:
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>";
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript поддерживает различные виды циклов:
for — циклически перебирает блок кода несколько раз.
for/in — циклически перебирает свойства объекта.
for/of — циклически перебирает значения итерируемый объект
while — циклически перебирает блок кода, пока заданное условие истинно.
do/ while — также циклически перебирает блок кода, пока указанное условие истинно.
forОператор for создает цикл с тремя необязательными выражениями:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}Выражение 1 выполняется (один раз) перед выполнением блока кода.
Выражение 2 определяет условие выполнения блока кода.
Выражение 3 выполняется (каждый раз) после выполнения блока кода.
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Из приведенного выше примера вы можете прочитать:
Выражение 1 устанавливает переменную перед началом цикла (пусть i=0).
Выражение 2 определяет условие запуска цикла (i должно быть меньше 5).
Выражение 3 увеличивает значение (i++) каждый раз, когда блок кода в цикле был казнен.
Обычно вы используете выражение 1 для инициализации переменной, используемой в цикле (пусть i=0).
Это не всегда так. JavaScript это не волнует. Выражение 1 необязательный.
Вы можете инициировать множество значений в выражении 1 (через запятую):
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
И вы можете опустить выражение 1 (например, когда ваши значения установлены до начала цикла):
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Часто выражение 2 используется для оценки состояния исходной переменной.
Это не всегда так. JavaScript это не волнует. Выражение 2 также необязательно.
Если выражение 2 возвращает true, цикл начнется заново. Если он возвращает false, цикл закончится.
Если вы опустите выражение 2, вы должны предоставить разрыв внутри петля. В противном случае цикл никогда не закончится. Это приведет к сбою вашего браузера. Прочтите о перерывах в следующей главе этого руководства.
Часто выражение 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++;
}Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Использование var в цикле:
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
Использование let в цикле:
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
В первом примере при использовании var переменная, объявленная в цикл переобъявляет переменную вне цикла.
Во втором примере при использовании let переменная, объявленная в цикл не переобъявляет переменную вне цикла.
Когда let используется для объявления переменной i в цикле, i переменная будет видна только внутри цикла.
For/Of и For/InЦикл for/in и цикл for/of описаны в следующей главе.
whileЦикл while и do/ while объясняются в следующих главах.