鬆軟科技Web課堂:JavaScript For 迴圈

迴圈可多次執行代碼塊。

JavaScript 迴圈

假如您需要運行代碼多次，且每次使用不同的值，那麼迴圈（loop）相當方便使用。

通常我們會遇到使用數組的例子：

不需要這樣寫：

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 (i = 0; i < cars.length; i++) { 
    text += cars[i] + "<br>";
 }

不同類型的迴圈

JavaScript 支持不同類型的迴圈：

• for - 多次遍歷代碼塊
• for/in - 遍歷對象屬性
• while - 當指定條件為 true 時迴圈一段代碼塊
• do/while - 當指定條件為 true 時迴圈一段代碼塊

For 迴圈

for 迴圈是在您希望創建迴圈時經常使用的工具。

for 迴圈的語法如下：

for (語句 1; 語句 2; 語句 3) {
     要執行的代碼塊
}

語句 1 在迴圈（代碼塊）開始之前執行。

語句 2 定義運行迴圈（代碼塊）的條件。

語句 3 會在迴圈（代碼塊）每次被執行後執行。

實例

for (i = 0; i < 5; i++) {
     text += "數字是 " + i + "<br>";
}

親自試一試

從上面的代碼中，您可以瞭解到：

語句 1 在迴圈開始之前設置了一個變數（var i = 0）。

語句 2 定義運行迴圈的條件（i 必須小於 5）。

語句 3 會在代碼塊每次執行之後對值進行遞增（i++）。

語句 1

通常，您會使用語句 1 來初始化迴圈中所使用的的變數（i = 0）。

但情況並不總是這樣，JavaScript 不會在意。語句 1 是可選的。

您可以在語句 1 中初始化多個值（由逗號分隔）：

實例

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

而且您還可以省略語句 1（比如在迴圈開始前設置好值）：

實例

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

語句 2

通常語句 2 用於計算初始變數的條件。

但情況並不總是這樣，JavaScript 不會在意。語句 2 也是可選的。

如果語句 2 返回 true，那麼迴圈會重新開始，如果返回 false，則迴圈將結束。

如果省略語句 2，那麼必須在迴圈中提供一個 break。否則迴圈永遠不會結束。請在下一章閱讀更多關於 break 的內容。

語句 3

通常語句 3 會遞增初始變數的值。

但情況並不總是這樣，JavaScript 不會在意。語句 3 也是可選的。

語句 3 可做任何事情，比如負遞增（i--），正遞增（i = i + 15），或者任何其他事情。

語句 3 也可被省略（比如當您在迴圈內遞增值時）：

實例

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

For/In 迴圈

JavaScript for/in 語句遍歷對象的屬性：

實例

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}