JavaScript 迴圈

Created: October-14, 2018

在本教程中，你將學習如何使用 JavaScript 中的迴圈重複一系列操作。

JavaScript 中不同型別的迴圈

迴圈用於一次又一次地執行相同的程式碼塊，直到滿足某個條件。迴圈背後的基本思想是自動化程式中的重複任務以節省時間和精力。JavaScript 現在支援五種不同型別的迴圈：

while - 迴圈遍歷程式碼塊，直到條件評估為 true。
do … while - 遍歷一段程式碼; 然後評估條件。如果條件為真，則只要指定的條件為真，就會重複該語句。
for - 迴圈遍歷程式碼塊，直到計數器達到指定的數字。
for … in - 迴圈遍歷物件的屬性。
for … of - 迴圈遍歷可迭代物件，例如陣列，字串等。

在以下部分中，我們將詳細討論每個迴圈語句。

`while` 迴圈

在 while 直到指定的條件評估為真時，迴圈將一直迴圈程式碼塊。一旦條件失敗，迴圈就會停止。 while 迴圈的通用語法是：

while(condition) {
    // Code to be executed
}

以下示例定義了一個迴圈，只要變數 i 小於或等於 5，該迴圈將繼續執行。 i 每次迴圈執行時，變數將增加 1：

var i = 1;
while(i <= 5) {    
    document.write("<p>The number is " + i + "</p>");
    i++;
}

注意： 確保迴圈中指定的條件最終變為 false。否則，迴圈將永遠不會停止迭代，這稱為無限迴圈。一個常見的錯誤是忘記增加計數器變數（在我們的例子中是變數 i）。

`do...while` 迴圈

do-while 迴圈是的變型 while 迴圈，其在每次迴圈迭代的結束後計算判斷條件。使用 do-while 迴圈執行一次程式碼塊，然後計算條件，如果條件為真，則只要指定的條件求值為真，就重複該語句。 do...while 迴圈的通用語法是：

do {
    // Code to be executed
}
while(condition);

以下示例中的 JavaScript 程式碼定義了一個以 i=1 開頭的迴圈。然後它將列印輸出並將變數 i 值增加 1.之後評估條件，只要變數 i 小於或等於 5，迴圈就會繼續執行。

var i = 1;
do {
    document.write("<p>The number is " + i + "</p>");
    i++;
}
while(i <= 5);

`while` 和 `do...while` 迴圈的區別

上面所講的 while 迴圈不同於 do-while 的一個重要卻別是，一個 while 迴圈，待評估的條件在每次迴圈迭代的開始時進行評估，因此，如果條件表示式評估為假，該迴圈將永遠不會被執行。

而另一方面 do-while 迴圈會至少被執行一次，即使條件表示式的值為 false，同 while 迴圈不同的是，條件是在迴圈迭代結束而不是在迴圈開始時評估的。

`for` 迴圈

for 迴圈在直到特定條件被滿足時是迴圈重複的程式碼塊。它通常用於執行特定次數的程式碼塊。它的語法是：

for(initialization; condition; increment) {
    // Code to be executed
}

for 迴圈語句的引數具有以下含義：

initialization - 它用於初始化計數器變數，並在第一次執行迴圈體之前無條件地進行一次計算。
condition - 在每次迭代開始時進行評估。如果計算結果為 true ，則執行迴圈語句。如果計算結果為 false ，則迴圈的執行結束。
increment - 每次迴圈執行時，它會使用新值更新迴圈計數器。

以下示例定義了一個以 i=1 開頭的迴圈。迴圈將持續到變數 i 值小於或等於 5。 i 每次迴圈執行時變數將增加 1：

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

for 迴圈對迭代陣列特別有用。以下示例將向你展示如何列印 JavaScript 陣列的每個專案或元素。

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}

`for...in` 迴圈

for-in 迴圈是一種特殊型別的迴圈，它遍歷物件的屬性，或陣列的元素。 for-in 迴圈的通用語法是：

for ( variable in object ) { // Code to be executed }

迴圈計數器即 for-in 迴圈的 variable 的是一個字串，而不是數字。它包含當前屬性的名稱或當前陣列元素的索引。

以下示例將向你展示如何遍歷 JavaScript 物件的所有屬性。

// An object with some properties 
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
 
// Loop through all the properties in the object  
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}

同樣，你可以迴圈遍歷陣列的元素，如下所示：

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}

注意： for-in 迴圈不應該被用在你也需要索引數字時的陣列遍歷。你最好使用帶有數字索引的 for 迴圈。

`for...of` 迴圈 (ES6)

ES6 引入了一個新的 for-of 迴圈，它允許我們非常容易地迭代陣列或其他可迭代物件（例如字串）。此外，迴圈內的程式碼是針對可迭代物件的每個元素執行的。

以下示例將向你展示如何使用此迴圈遍歷陣列和字串。

// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Iterating over string
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

要了解其他 ES6 功能，請檢視 JavaScript ES6 功能章節。

注： for...of 迴圈不能用於物件，因為它們不是可迭代的。如果要迭代物件的屬性，可以使用 for-in 迴圈。

JavaScript 中不同型別的迴圈

while 迴圈

do...while 迴圈

while 和 do...while 迴圈的區別

for 迴圈

for...in 迴圈

for...of 迴圈 (ES6)