JavaScript for 迴圈
示例
迴圈（迭代）程式碼塊五次
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
自己動手試一試 »
迴圈（迭代）陣列以收集汽車名稱
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
自己動手試一試 »
- 迴圈從位置 0 開始（
let i = 0）。 - 迴圈在每次執行時自動遞增
i。 - 迴圈一直執行，只要
i < cars.length為真。
更多示例見下文。
描述
for 語句定義了一個程式碼塊，該程式碼塊在條件為 true 時執行。
語法
for (語句 1; 語句 2; 語句 3) {
要執行的程式碼塊
}
引數
| 引數 | 描述 |
| 語句 1 | 可選。 在程式碼塊開始之前執行。 通常用於初始化計數器變數。 要初始化多個值，請用逗號分隔每個值。 此引數可以省略，但分號“;”不能省略 |
| 語句 2 | 可選。 執行程式碼塊的條件。 如果它返回 true，迴圈將再次開始，否則迴圈將結束。此引數可以省略，但分號“;”不能省略 |
| 語句 3 | 可選。 在程式碼塊之後執行。 通常用於遞增計數器變數。 此引數可以省略（例如，在迴圈內部增加/減少值） |
JavaScript 迴圈語句
| 語句 | 描述 | |
| break | 跳出迴圈 | |
| continue | 跳過迴圈中的一個值 | |
| while | 當條件為真時迴圈程式碼塊 | |
| do...while | 執行一次程式碼塊，然後當條件為真時繼續迴圈 | |
| for | 當條件為真時迴圈程式碼塊 | |
| for...of | 遍歷任何可迭代物件的值 | |
| for...in | 遍歷物件的屬性 |
更多示例
在第一個引數中初始化多個值
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
自己動手試一試 »
省略第一個引數（在迴圈開始之前設定值）
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
自己動手試一試 »
使用 continue - 迴圈程式碼塊，但跳過值 3
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
自己動手試一試 »
使用 break - 迴圈程式碼塊，但當 i == 3 時退出迴圈
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
自己動手試一試 »
省略第二個引數。
使用 break 退出迴圈，否則迴圈將永遠不會結束，並且您的瀏覽器將崩潰
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
自己動手試一試 »
按降序（負增量）遍歷陣列
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
自己動手試一試 »
省略最後一個引數，並在迴圈內部遞增值
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
自己動手試一試 »
遍歷 NodeList 並更改列表中所有 p 元素的顏色
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
自己動手試一試 »
巢狀迴圈（迴圈中的迴圈）
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
自己動手試一試 »
瀏覽器支援
for 是 ECMAScript1 (ES1) 的一個特性。
ES1 (JavaScript 1997) 在所有瀏覽器中都得到完全支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 是 |
