JavaScript for 迴圈
迴圈可以將程式碼區塊執行指定的次數。
JavaScript 循環
如果您希望一遍又一遍地運行相同的程式碼,並且每次的值都不同,那麼使用循環是很方便的。
我們可以這樣輸出陣列的值:
實例
#
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0;i<cars.length;i++){ document.write(cars[i] + "<br>"); } </script> </body> </html>
執行實例»
點擊"執行實例" 按鈕可查看線上實例
不同類型的迴圈
JavaScript 支援不同類型的迴圈:
##for - 迴圈程式碼區塊一定的次數
for/in - 迴圈遍歷物件的屬性
while - 當指定的條件為true 時循環指定的程式碼區塊
do/while - 同樣當指定的條件為true 時循環指定的程式碼區塊
For 迴圈for 迴圈是您在希望建立迴圈時常會用到的工具。 下面是 for 迴圈的語法:
for (
語句
1; 語句 2; 語句 3)
{
被執行的程式碼區塊 }
被執行的程式碼區塊 }
語句 1 (程式碼區塊)開始前執行 starts.
語句2 定義執行迴圈(程式碼區塊)的條件
語句3 在迴圈(程式碼區塊)已被執行後執行
實例
運行實例»點擊"運行實例" 按鈕查看線上實例
從上面的範例中,您可以看到:Statement 1 在迴圈開始之前設定變數(var i=0)。 Statement 2 定義循環運行的條件(i 必須小於 5)。 Statement 3 在每次程式碼區塊已執行後增加一個值 (i++)。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>点击按钮循环代码5次。</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x=""; for (var i=0;i<5;i++){ x=x + "该数字为 " + i + "<br>"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
運行實例»點擊"運行實例" 按鈕查看線上實例
語句 1通常我們會使用語句 1 初始化迴圈中所使用的變數 (var i=0)。 語句 1 是可選的,也就是說不使用語句 1 也可以。 您可以在語句1 中初始化任意(或多個)值:
實例
運行實例» 點擊"運行實例" 按鈕查看線上實例
同時您也可以省略語句1(例如在循環開始前已經設定了值時): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0,l=cars.length; i<l; i++){ document.write(cars[i] + "<br>"); } </script> </body> </html>
運行實例» 點擊"運行實例" 按鈕查看線上實例
實例
運行實例»#點擊"運行實例" 按鈕查看線上實例
運行實例»
運行實例»
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; var i=2,len=cars.length; for (; i<len; i++){ document.write(cars[i] + "<br>"); } </script> </body> </html>
運行實例»#點擊"運行實例" 按鈕查看線上實例
語句 2
通常語句 2 用來評估初始變數的條件。
語句 2 同樣是可選的。
如果語句 2 傳回 true,則循環再次開始,如果傳回 false,則循環將結束。
如果您省略了語句 2,那麼必須在迴圈內提供 break。否則循環就無法停下來。這樣有可能令瀏覽器崩潰。請在本教學稍後的章節閱讀有關 break 的內容。 |
語句 3
通常語句 3 會增加初始變數的值。
語句 3 也是可選的。
語句 3 有多種用法。增量可以是負數 (i--),或更大 (i=i+15)。
語句3 也可以省略(例如當循環內部有對應的程式碼時):
#實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <script> cars=["BMW","Volvo","Saab","Ford"]; var i=0,len=cars.length; for (; i<len; ){ document.write(cars[i] + "<br>"); i++; } </script> </body> </html>
運行實例»
點擊"執行實例" 按鈕查看線上實例
#For/In 迴圈
JavaScript for/in 語句循環遍歷物件的屬性:
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>点击下面的按钮,循环遍历对象 "person" 的属性。</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x; var txt=""; var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){ txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; } </script> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
您將在有關JavaScript 物件的章節學到更多有關for / in 循環的知識。
While 迴圈
我們將在下一章為您講解 while 迴圈和 do/while 迴圈。