1.JavaScript 迴圈 如果希望一遍又一遍地運行相同的代碼，並且每次的值都不同，那麼使用迴圈是很方便的。 我們可以這樣輸出數組的值： 一般寫法： for迴圈寫法： 結果： 2.不同類型的迴圈 JavaScript 支持不同類型的迴圈： for - 迴圈代碼塊一定的次數 for/in - 迴圈 ...
1.JavaScript 迴圈
如果希望一遍又一遍地運行相同的代碼，並且每次的值都不同，那麼使用迴圈是很方便的。
我們可以這樣輸出數組的值：
一般寫法：
document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>");
for迴圈寫法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Yubaba</title> </head> <body> <script> arr=["1","2","3","4","5","6"]; for (var i=0;i<arr.length;i++){ document.write(arr[i] + "<br>"); } </script> </body> </html>
結果：
2.不同類型的迴圈
JavaScript 支持不同類型的迴圈：
- for - 迴圈代碼塊一定的次數
- for/in - 迴圈遍歷對象的屬性
- while - 當指定的條件為 true 時迴圈指定的代碼塊
- do/while - 同樣當指定的條件為 true 時迴圈指定的代碼塊
3.For 迴圈
for 迴圈是您在希望創建迴圈時常會用到的工具。
下麵是 for 迴圈的語法：
for (語句 1; 語句 2; 語句 3)
{
被執行的代碼塊
}
語句 1 （代碼塊）開始前執行
語句 2 定義運行迴圈（代碼塊）的條件
語句 3 在迴圈（代碼塊）已被執行之後執行
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>點擊按鈕迴圈代碼6次。</p> 10 <button onclick="myFunction()">點擊這裡</button> 11 <p id="demo"></p> 12 <script> 13 function myFunction(){ 14 var x=""; 15 for (var i=0;i<6;i++){ 16 x=x+"該數字為 " + i + "<br>"; 17 } 18 document.getElementById("demo").innerHTML=x; 19 } 20 </script> 21 22 </body> 23 </html>
運行結果：
for中的 語句 1
通常我們會使用語句 1 初始化迴圈中所用的變數 (var i=0)。
語句 1 是可選的，也就是說不使用語句 1 也可以。
我們可以在語句 1 中初始化任意（或者多個）值：
如：
for (var i=0,len=cars.length; i<len; i++) { document.write(cars[i] + "<br>"); }
同時還可以省略語句 1（比如在迴圈開始前已經設置了值時）：
如：
var i=2,len=cars.length; for (; i<len; i++) { document.write(cars[i] + "<br>"); }
for中的 語句 2
通常語句 2 用於評估初始變數的條件。
語句 2 同樣是可選的。
如果語句 2 返回 true，則迴圈再次開始，如果返回 false，則迴圈將結束。
註意：如果我們省略了語句 2，那麼必須在迴圈內提供 break。否則迴圈就無法停下來。這樣有可能令瀏覽器崩潰。
for中的 語句 3
通常語句 3 會增加初始變數的值。
語句 3 也是可選的。
語句 3 有多種用法。增量可以是負數 (i--)，或者更大 (i=i+15)。
語句 3 也可以省略（比如當迴圈內部有相應的代碼時）：
var i=0,len=cars.length; for (; i<len; ) { document.write(cars[i] + "<br>"); i++; }
4.For/In 迴圈
JavaScript for/in 語句迴圈遍歷對象的屬性：
實例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Yubaba</title> 6 </head> 7 <body> 8 9 <p>點擊下麵的按鈕，通過for in迴圈遍歷對象 "person" 的屬性。</p> 10 <button onclick="myFunction()">點擊這裡</button> 11 <p id="demo"></p> 12 <script> 13 function myFunction(){ 14 var x; 15 var txt=""; 16 var person={fname:"Bill",lname:"Gates",age:56}; 17 for (x in person){ 18 txt=txt + person[x]+" "; 19 } 20 document.getElementById("demo").innerHTML=txt; 21 } 22 </script> 23 24 </body> 25 </html>
運行結果：
