Цикл For JavaScript

Цикл используется в программировании для автоматического выполнения повторяющихся задач.

Например, предположим, что мы хотим напечатать "Hello World" 10 раз. Это можно сделать следующим образом:

　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");

В цикле это предложение нужно написать только один раз, а цикл выполнится 10 раз, как показано ниже:

for (let i = 0; i < 10; i++) {
document.write("Hello World<br>");
}

Цикл for

Синтаксис цикла for следующий:

for (initialization; condition; final-expression) {
　　　　// 待执行的语句
}

initializationвыполняется до выполнения предложения (один раз).

conditionопределяет условие выполнения предложения.

После выполнения предложения выполняетсяfinal-expression.

for (var i = 0; i < 5; i++) {
　　　　document.write("<br>The number is " + i);
}

Из上面的 примера вы можете прочитать:

• initialization устанавливаем переменную до начала цикла (переменная i = 0).

• condition определяем условие выполнения цикла (я должен быть меньше 5).

• каждый раз, когда выполняется блок кода в цикле:final-expression всегдаУвеличиваем значение (i++).

В следующем примере мы проходим по массиву в прямом порядке:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = ";"
for (var i = 0; i < fruits.length; i++) {
　　　　txt += fruits[i] + "<br>";
}

В следующем примере мы проходим по массиву в обратном порядке:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = ";"
for (var i = fruits.length - 1; i >= 0; i--) {
txt += fruits[i] + "<br>";
}

Необязательные выражения

Три выражения в цикле for являются необязательными. Например, мы можем написать этот же оператор for, не включая инициализацию переменной, инициализируя переменную вне цикла.

//Декларация переменной вне цикла
var i = 0;
//Инициализация цикла
for (; i < 5; i++) {
document.write(i);
}

В этом случае, первый точка с запятой означает, что это предложение指向 инициализацию, условие или конечное выражение, даже если его можно пропустить.

Ниже, мы также можем удалить условие из цикла. Мы будем использовать оператор if и break, чтобы сообщить циклу停止运行, когда i больше 3, что соответствуетtrue条件相反。

//Декларация переменной вне цикла
var i = 0;
//Пропуск инициализации и условия
for (; ; i++) {
if (i > 3) {
break;
}
document.write(i);
}

Обратите внимание:break Если условие пропущено, то это предложение должно быть включено,否则 цикл будет вечным и может привести к сбою браузера.

В конце концов, переменную можно удалить, поместив конечное выражение в конец цикла. Два точки с запятой по-прежнему должны быть включены, в противном случае цикл не будет работать.

//Декларация переменной вне цикла
var i = 0;
//Пропуск всех выражений
for (; ; ) {
if (i > 3) {
break;
}
document.write(i);
i++;
}

Из上面的 примера可以看出, обычно все три этих оператора создают наиболее краткое и читаемое код.

Вложенные циклы

Вы можете использовать вложенные циклы, то есть цикл в цикле.

Вложенные циклы используются во многих местах матричного умножения, для отображения таблиц и многого другого:

var txt = "";
for (var row = 0; row < 10; row++) {
　　　for (var col = 0; col < row; col++) {
　　　txt += "* ";
　　　}
　　　txt += "<br>";
}

Цикл for...in

свойства объекта, который итерируется с помощью цикла for...in.

Для демонстрации мы создадим простуюmyObjобъект, который содержит несколькоname: valueДа.

var myObj = {
name: "VISHAL",
age: 22,
height: 175,
city: "New Delhi",
getNothing: function () { return ""; }
};
for (let x in myObj) {
document.write(x);
}

В каждом итерации из объекта назначается один атрибутx,И этот цикл продолжается до тех пор, пока все свойства объекта не будут израсходованы.

Следующий пример реализует цикл for...in и выводит свойства Web-браузераNavigatorОбъект:

for (let x in navigator) {
document.write(x);
}

Цикл For ... Of

Цикл for...of создает цикл для итерации по объектам, включая: встроенные String, Array, объекты, подобные Array, и пользовательские итерируемые объекты.

let iterable = [10, 20, 30, 40, 50];
for (let x of iterable) {
document.write(x);
}

В каждом итерации из объекта назначается один элементx,И этот цикл продолжается до тех пор, пока все элементы объекта не будут израсходованы.

Независимо от того, что итерирует for...in и for...of, основное различие между ними заключается в том, что они итерируют:

• Цикл for...in итерирует перечисленные свойства объекта, в произвольном порядке

• Цикл for...of итерирует данные, объект итерации, который нужно пройтись

While-цикл

While-цикл и do...while-цикл будут объяснены в следующей главе.