JavaScript for 語句

JavaScript 語句參考手冊 JavaScript 語句參考手冊

實例

迴圈代碼塊5次：

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

text 輸出結果為：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

本文底部包含了更多實例。

定義和用法

for 語句只要判斷條件為 true 就會一直執行。

只要條件為 true，迴圈就有持續執行，直到條件為 false。

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

JavaScript 支持不同類型的迴圈：

  • for - 迴圈代碼塊一定的次數
  • for/in - 迴圈遍曆對象的屬性
  • while - 當指定的條件為 true 時迴圈指定的代碼塊
  • do/while - 同樣當指定的條件為 true 時迴圈指定的代碼塊

提示： 使用 break 語句來跳出迴圈，使用continue 語句來跳過點前的迭代，並執行下一個迭代。

流覽器支持

語句
for Yes Yes Yes Yes Yes

語法

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

參數值

參數 描述
statement1 可選。在迴圈之前執行，用於變數的初始化，初始化多個變數使用逗號隔開(,)。

注意： 該參數可以省略。但是，不要忽略 分號 ";"。
statement2 可選。定義執行迴圈的條件。 通常該語句用於條件判斷，如果條件為 true, 迴圈會繼續執行，如果為 false，迴圈終止。

注意： 該參數可以省略。但是，不要忽略 分號 ";"。同樣，如果你忽略了該參數，你必須在迴圈中提供跳出迴圈的條件。否則語句無限迴圈，會造成流覽器崩潰。
statement3 可選。在每次迴圈後執行該語句。通常該語句用於自增或自減計數變數。

注意： 該參數可以忽略(例如： 自增或自減值在迴圈內操作)

技術細節

JavaScript 版本： 1.0

實例

更多實例

實例

通過迴圈數組的索引列印出車名：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

以上實例解析:

  • 首先，我們在迴圈開始前設置了變數(var i = 0;)
  • 然後，我們定義了執行迴圈的條件。迴圈會一直執行直到變數的值小於數組的長度 (長度為 4)
  • 每次執行迴圈，變數都會自增 1 (i++)
  • 如果變數不再小於 4 (數組的長度), 條件即為 false，退出迴圈。

實例

在第一個參數初始化多個值：

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


實例

忽略第一個參數 (在迴圈前設置值):

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


實例

使用 continue 語句 - 迴圈代碼塊，但跳過 i 等於 "3" 的迴圈:

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        continue;
}
    text += "The number is " + i + "<br>";
}


實例

使用 break 語句 - 迴圈代碼塊，但在變數 i 等於 "3" 時退出迴圈:

var text = ""
var i;
for (i = 0; i < 5; i++) {
    if (i == 3) {
        break;
}
    text += "The number is " + i + "<br>";
}


實例:

忽略第二個參數。該實例中，我們同樣使用了 break 語句在i 等於 "3" 時退出迴圈  (如果第二個參數忽略，你必須在循環體內設置跳出迴圈條件。否則迴圈無法終止，會導致流覽器崩潰):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
    if (i == 3) {
break;
    }
    text += cars[i] + "<br>";
}


實例

按遞減的方式迴圈數組的索引:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
    text += cars[i] + "<br>";
}


實例

忽略最後一個參數，在循環體內遞增值：

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


實例

迴圈 NodeList 對象的節點並修改列表中所有 <p> 元素的背景顏色：

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}


實例

嵌套迴圈實例：

var text = "";
var i, j;

for (i = 0; i < 3; i++) {
text += "<br>" + "i = " + i + ", j = ";

    for (j = 10; j < 15; j++) {
document.getElementById("demo").innerHTML = text += j + " ";
}
}


相關頁面

JavaScript 教學: JavaScript For 迴圈

JavaScript 參考手冊: JavaScript for ... in 語句

JavaScript 參考手冊: JavaScript break 語句

JavaScript 參考手冊: JavaScript continue 語句

JavaScript 參考手冊: JavaScript while 語句

JavaScript 語句參考手冊 JavaScript 語句參考手冊