Latest web development tutorials

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語句參考手冊