JavaScript for 語句

定義和用法

for 語句創建循環，只要條件為真就執行該循環。

只要條件為真，循環就會繼續運行。只有當條件變為假時它才會停止。

JavaScript 支持不同類型的循環：

  • for - 多次循環代碼塊
  • for/in - 遍歷對象的屬性
  • for/of - 循環遍歷可迭代對象的值
  • while - 在指定條件為真時循環代碼塊
  • do/while - 循環一次代碼塊，然后在指定條件為真時重復循環

提示：請使用 break 語句跳出循環，使用 continue 語句跳過循環中的某個值。

實例

循環代碼塊五次：

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

親自試一試

頁面下方有更多 TIY 實例。

語法

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

參數值

參數 描述
statement1

可選。在循環（代碼塊）開始之前執行。通常此語句用于初始化計數器變量。如需初始化多個值，請用逗號分隔每個值。

注釋：該參數可以省略。但是，不要省略分號 ";"
statement2

可選。定義運行循環（代碼塊）的條件。通常此語句用于評估計數器變量的條件。如果返回 true，循環將重新開始，如果返回 false，循環將結束。

注釋：該參數可以省略。但是，不要省略分號 ";"。此外，如果省略此參數，則必須在循環內提供 break。否則循環將永遠不會結束，這將使您的瀏覽器崩潰。
statement3

可選。每次執行循環（代碼塊）后執行。通常此語句用于遞增或遞減計數器變量。

注釋：這個參數可以省略（例如增加/減少循環內的值）。

技術細節

JavaScript 版本： ECMAScript 1

更多實例

實例

循環遍歷數組的索引，從 cars 數組中收集汽車名稱：

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），循環就會繼續
  • 每次循環執行時，變量加一 (i++)
  • 一旦變量不再小于 4（數組的長度），條件為假，循環結束

實例

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

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 語句 - 循環代碼塊，但跳過 "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" 時退出循環（如果省略第二個參數，則必須在循環內提供一個 break。否則循環將永遠不會結束，您的瀏覽器將奔潰）：

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 + " ";
  }
}

親自試一試

瀏覽器支持

語句 Chrome IE Firefox Safari Opera
for 支持 支持 支持 支持 支持

相關頁面

JavaScript 教程：JavaScript For 循環

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

JavaScript 參考手冊：JavaScript break 語句

JavaScript 參考手冊：JavaScript continue 語句

JavaScript 參考手冊：JavaScript while 語句