迴圈是一種重複執行的運算,一個典型的迴圈,包含兩個主要的部份-分別是是判斷式以及重複執行的程式區塊,JavaScript 有兩種主要的迴圈- for 與 while ,首先來看 for 迴圈,語法如下:
for (init;cond;increment){
// for 迴圈執行程式
}
for關鍵字定義迴圈重複執行的次數以及何時結束:
<script>
for (var i = 0; i < 10 ; i++) {
console.log(i);
}
</script>
for 關鍵字後方的第一個條件式定義了 i 計數器變數,第二個條件式要求當 i 小於 10 執行其中的內容,否則跳出迴圈,最後一個條件式則於每一次迴圈開始執行時將 i 加 1 ,逐一在控制檯輸出 0~ 9 的數字。
##》迴圈 while 與 do/while
while 是另外一種類型的迴圈,當執行的迴圈沒有固定次數,無法透過for迴圈來達到重複執行的目的,while迴圈很適合用來處理這樣的情況。
while(expression){
// expression 是 true 則執行這裡的語法 …
}
expression運算式傳回布林運算結果,如果這個結果值是true,其中while區塊內的程式碼便會被執行,完成之後程式會再回到 while 重新執行一次exprssion,一直到它的值為false為止。考慮以下的程式碼:
<script>
var i = 500;
var j = 1000;
while (i < j) {
i += 3;
j += 1;
}
console.log("i=" + i + ";j=" + j);
</script>
變數i與j的初始值設定為500與1000,接下來的while迴圈,每一次為變數i加上3,變數j加上1,一直到i的值不再小於j 便停止迴圈,輸出i與j的內容。
i=1250;j=1250
以上為最後的輸出結果,其中 i 與 j 的值已經相等,再一次迴圈則 i 將大於 j,因此會跳出迴圈。while迴圈另外還有一個do-while版本,語法如下:
do{
// expression 是 true 則執行這裡的語法 …
} while(expression)
其中關鍵字do宣告while迴圈開始,而while運算式則在迴圈結束的時候進行判斷,如果結果值是true,這個迴圈會再一次執行,否則跳出迴圈。與上述while迴圈的差異,在於這個迴圈本身無論如何,會先執行區塊中的程式碼一次,既使while的expression執行結果為false。while與do/while在大部份場合的執行結果並沒有差異,但是它會影響第一次的執行,考慮以下的程式碼:
<script>
var i = 1;
var number1 = 2;
while (number1 % 2 != 0) {
console.log("number1:" + number1);
number1 = 3 * i;
i++;
}
var j = 1;
var number2 = 2;
do {
console.log("number2:" + number2);
number2 = 3 * j;
j++;
} while (number2 % 2 != 0);
</script>
第一段迴圈先檢視number1是否除以2不等於零,也就是如果它是奇數的話,就進入迴圈,輸出其變數值,然後將變數i乘以3設定給它,最後將i加上1。另外一段while迴圈先輸出number2這個變數,然後將變數j乘上3,最後則將j加1,而最後的while檢視number2是否為奇數,是的話則繼續下一個迴圈。
number2:2
number2:3
範例中的兩段迴圈,每一段均針對一個指定的變數進行奇偶數的判斷,然後這個變數會被調整乘上3的倍數,再進行下一次的判斷,由於一開始它的初始值是一個偶數,因此第一段迴圈無法通過while檢視,沒有任何輸出。相反的,第二段迴圈由於無論如何必須先執行一次,因此它會直接輸出其中的number2,但是一進入迴圈之後,number2被調整成為3的倍數,因此迴圈結束的while判斷還是會通過,直到它變成6,才結束迴圈的執行。
##》break與continue
在預設的情形下,迴圈只有到達指定的條件時才會結束執行,我們可以透過break敘述強制中斷迴圈,將其配置於迴圈區塊內指定的位置,就能達到中斷的效果。以稍早討論的 while 為例,break 語法如下:
while(true){
…
break ; // 程式在這裡中斷跳出迴圈
…
}
當程式執行到break這一行敘述的時候,迴圈便會中斷,跳出整個大括弧的執行範圍區塊。break會無條件中斷迴圈,因此通常搭配if敘述判斷是否要執行,只有在某些條件符合的情形下,才會執行 break 敘述。考慮以下的程式碼:
<script>
var count = 0;
while (true) {
count++;
if (count > 100)
break;
}
console.log(count);
</script>
while敘述以常數值true表示建立一個無窮迴圈,每一次迴圈執行時,將變數count加1,if判斷式檢視count是否已經大於100,是的話則引用break,中斷迴圈的執行。最後這個範例輸出的變數值為101。
瞭解break之後,現在來看continue,它會在執行時跳出迴圈,但不會停止迴圈的執行,而是繼續下一次的迴圈,我們可以利用這種特性要求迴圈執行部份的內容。例如以下的程式片段:
<script>
var i = 0;
var result = 0;
for (i = 1; i <= 100; i++) {
if (i % 2 == 0)
continue;
result += i;
}
console.log(result);
</script>
coutinue會從目前的迴圈中跳開直接進入下一次的迴圈,這一點是與break最大的差異,如果引用break,這個迴圈將永遠終止跳出,而不會有下一次的執行機會。