JavaScript For 循環(huán)

循環(huán)在編程中用于自動執(zhí)行重復(fù)性任務(wù)。

例如，假設(shè)我們要打印“ Hello World” 10次?？梢匀缦滤具M(jìn)行：

  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>");

而在循環(huán)中，該語句只需編寫一次，循環(huán)將執(zhí)行10次，如下所示：

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

For 循環(huán)

for循環(huán)的語法如下：

for (initialization; condition; final-expression) {
    //待執(zhí)行的語句
}

initialization在執(zhí)行語句之前執(zhí)行（一次）。

condition定義了執(zhí)行語句的條件。

在執(zhí)行完語句后，每次都會執(zhí)行final-expression。

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

從上面的示例中，您可以閱讀：

• initialization 在循環(huán)開始之前設(shè)置變量（變量i = 0）。

• condition 定義了循環(huán)運行的條件（我必須小于5）。

• 每次執(zhí)行循環(huán)中的代碼塊時，final-expression都會增加一個值（i ++）。

在下面的示例中，我們以升序循環(huán)遍歷一個數(shù)組：

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

在下面的示例中，我們以降序循環(huán)遍歷一個數(shù)組：

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

可選表達(dá)式

for循環(huán)中的三個表達(dá)式都是可選的。例如，我們可以通過在循環(huán)外部初始化變量來編寫相同的For語句，而不需要初始化表達(dá)式。

//在循環(huán)外聲明變量
var i = 0;

//初始化循環(huán)
for (; i < 5; i++) {
document.write(i);
}

在這種情況下，第一個； 表示該語句是指向初始化，條件還是最終表達(dá)式，即使省略它也是必要的。

下面，我們還可以從循環(huán)中刪除條件。我們將使用一個if語句和break來告訴循環(huán)在i大于3時停止運行，這與true條件相反。

//在循環(huán)外聲明變量
var i = 0;

//省略初始化和條件
for (; ; i++) {
if (i > 3) {
break;
}
document.write(i);
}

注意：break如果省略該條件，則必須包含該語句，否則循環(huán)將永遠(yuǎn)無限循環(huán)運行，并可能導(dǎo)致瀏覽器崩潰。

最后，可以通過將最終表達(dá)式放在循環(huán)末尾來將其刪除。兩個分號仍必須包含在內(nèi)，否則循環(huán)將無法運行。

//在循環(huán)外聲明變量
var i = 0;

//省略所有表達(dá)式
for (; ;) {
if (i > 3) {
break;
}
document.write(i);
i++;
}

從上面的示例可以看出，包括所有這三個語句通常會產(chǎn)生最簡潔易讀的代碼。但是，知道以后可以省略語句是很有用的。

嵌套循環(huán)

您可以嵌套循環(huán)，即在另一個循環(huán)內(nèi)循環(huán)。

嵌套循環(huán)在矩陣乘法中的大多數(shù)地方都使用，顯示表格和許多其他地方：

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

For ...in循環(huán)

for...in循環(huán)迭代的對象的屬性。

為了演示，我們將創(chuàng)建一個簡單的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，并且此循環(huán)一直進(jìn)行到對象的所有屬性用盡為止。

以下示例實現(xiàn)一個for...in循環(huán)并打印Web瀏覽器的Navigator對象：

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

For ... Of循環(huán)

for...of語句創(chuàng)建一個循環(huán)遍歷可迭代對象，包括：內(nèi)置String，Array，類似Array的對象和用戶定義的可迭代對象。

let iterable = [10, 20, 30, 40, 50];

for (let x of iterable) {
document.write(x);
}

在每次迭代中，將來自對象的一個元素分配給x，并且此循環(huán)持續(xù)進(jìn)行到對象的所有元素用盡為止。

無論for...in和for...of循環(huán)迭代的東西。它們之間的主要區(qū)別在于它們迭代的內(nèi)容：

• for...in循環(huán)迭代的對象的枚舉的屬性，以任意的順序

• for...of循環(huán)迭代數(shù)據(jù)，該迭代的對象定義要遍歷

While循環(huán)

在while環(huán)路和do...while環(huán)路將在下一章來解釋。