Javascript 中有四種迴圈，一種是前測試的 while 迴圈 (while loop) ，另一種則是後測試的 do-while 迴圈 (do-while loop) ，還有用於固定重複數的 for 迴圈 (for loop) 與 for-in 迴圈 (for-in loop) 。通常 while 與 for 可以互相替代，端視自己喜歡用哪一種囉！
我們先來看看 while 迴圈的寫法
var i = 10; // 設定控制變數
while (i > 0) {
// 迴圈工作區
document.write(i + "<br / >");
i--; // 調整控制變數值
}這個迴圈所進行的工作很簡單，先在命令列上印出 10 ，然後一路倒數到 1 為止。迴圈有三個地方要注意
- 設定控制變數
- 條件
- 調整控制變數值
while 迴圈的控制變數 (control variable) 必須在 while 之前就先設定好，此例中將控制變數 i 設定為 10 。然後進入 while 的地方，條件 (condition) 就在 while 之後的小括弧中，此例中為當控制變數 i 大於 0 時，迴圈便會重複執行。迴圈工作區，也就是 while 底下用大括弧圍住的程式區塊，這裡，我們只有簡單的印出控制變數 i 的值，迴圈工作區的最後需要有調整控制變數值的地方。
我們先寫成完整的範例，來編譯 (compile) 看看結果吧！
var i = 10; // 設定控制變數
while (i > 0) {
// 迴圈工作區
document.write(i + "<br / >");
i--; // 調整控制變數值
}
/* 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：whiledemo.js
功能：示範 JavaScript 程式
作者：張凱慶
時間：西元 2012 年 12 月 */我們用以下的 HTML 文件載入
<script language="JavaScript" src="whiledemo.js"></script>
<!-- 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：whiledemo.html
功能：示範 JavaScript 程式
作者：張凱慶
時間：西元 2012 年 12 月 -->瀏覽器開啟如下
當我們明確知道重複次數的時候，我們得利用控制變數來記錄 while 迴圈所進行次數，這樣 while 迴圈才會有結束的一天，不然若是三個與控制變數相關的部份，漏了任一部份時，就有可能導致無窮迴圈 (infinite loop) 的發生，例如
var i = 10; // 設定控制變數
while (i > 0) {
// 迴圈工作區
document.write(i + "<br / >");
// 沒有調整控制變數值
}這樣一來，控制變數 i 永遠大於 0 ，所以迴圈會一直重複執行，此例中會不斷的在命令列印出 10 ，直到強制結束程式的執行為止。
以上的 while 迴圈是介紹有明確重複次數的用法，若是迴圈沒有明確重複次數，那就得另行設計結束迴圈的方式，例如控制變數等於某一個值之時，再利用 break 跳出迴圈。
另外一個 for 迴圈則是把控制變數的設定、迴圈結束條件、控制變數的調整全都寫在小括弧之中，如下
for (var i = 10; i > 0; i--) {
document.write(i + "<br / >");
}for 之後的小括弧用兩個分號區隔三個項目，依序是控制變數的設定、迴圈結束條件、控制變數的調整。這個 for 迴圈與上面的 while 迴圈功能完全相同，寫成完整的範例程式，如下
for (var i = 10; i > 0; i--) {
document.write(i + "<br / >");
}
/* 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：fordemo.js
功能：示範 JavaScript 程式
作者：張凱慶
時間：西元 2012 年 12 月 */我們用以下的 HTML 文件載入
<script language="JavaScript" src="fordemo.js"></script>
<!-- 《程式語言教學誌》的範例程式
http://pydoing.blogspot.com/
檔名：fordemo.html
功能：示範 JavaScript 程式
作者：張凱慶
時間：西元 2012 年 12 月 -->瀏覽器開啟如下
小括中的兩個分號與條件是必須的，因此如果寫成
var i = 1;
for (; i > 0;) {
document.write(i + "<br / >");
}這會使 for 迴圈變成一個無窮迴圈。
習慣上， for 迴圈通常用於具有明確重複次數的迴圈，因為全部的控制機制都放在 for 之後的小括弧中， while 迴圈用於沒有明確重複次數的迴圈，例如接收使用者輸入的迴圈，當使用者輸入結束指令的時候，迴圈才會結束，不然程式會一直等待使用者的輸入。
但是提醒一點， for 迴圈可以用 while 迴圈替代，反之亦然，自己偏好哪一種也就可以用哪一種囉！
do-while 迴圈把結束條件放在最後，其餘跟 while 迴圈相同，也就是說，進入 do-while 迴圈是先做第一次，然後才進行條件測試，如下
var i = 10 // 設定控制變數
do {
// 迴圈工作區
document.write(i + "<br / >");
// 沒有調整控制變數值
} while (i > 0);雖然大多數的 do-while 也能夠用 while 替代，還是有些情況用後測試迴圈來寫會比較方便。
for-in 迴圈是針對複合資料型態使用的，主要是簡化 for 迴圈的寫法。
迴圈可進行重複的工作，把工作實際劃分成小單位得用函數 (function) ，函數是什麼呢？我們接下來好好介紹一下函數吧！
| 中英文術語對照 | |
|---|---|
| 程式 | program |
| 迴圈 | loop |
| 程式區塊 | block |
| while 迴圈 | while loop |
| for 迴圈 | for loop |
| do-while 迴圈 | do-while loop |
| 控制變數 | control variable |
| 條件 | condition |
| 編譯 | compile |
| 無窮迴圈 | infinite loop |
| 函數 | function |
您可以繼續參考
基礎篇
相關目錄
回 JavaScript 入門指南
回 JavaScript 教材
回首頁
參考資料
https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Statements
http://www.w3schools.com/JS/js_loop_for.asp
http://www.w3schools.com/JS/js_loop_while.asp
http://www.tutorialspoint.com/javascript/javascript_while_loop.htm
http://www.tutorialspoint.com/javascript/javascript_for_loop.htm
http://www.tutorialspoint.com/javascript/javascript_forin_loop.htm
http://www.tutorialspoint.com/javascript/javascript_loop_control.htm
沒有留言:
張貼留言