JavaScript ..
JavaScript ..

软件开发平台及语言笔记大全(超详细)

JavaScript 快速入門（6/10）－ 迴圈

迴圈是一種重複執行的運算，一個典型的迴圈，包含兩個主要的部份－分別是是判斷式以及重複執行的程式區塊，JavaScript 有兩種主要的迴圈－ for 與 while ，首先來看 for 迴圈，語法如下：

for (init;cond;increment){

     // for 迴圈執行程式

}

for關鍵字定義迴圈重複執行的次數以及何時結束：

  • 小括弧的內容定義迴圈計數器，控制區塊中程式敘述的執行次數，其中的init初始化計數器的起始值，這個運算式只會執行一次。
  • cond 是一個判斷式，定義計數器何時停止，如果它的結果是true，表示迴圈將繼續重複執行，否則跳出迴圈。
  • increment 負責改變計數器的值，通常是將計數器的值進行遞增或是遞減的操作。 每一次for區塊裡面的程式敘述執行完畢時，它會跳回for重新執行小括弧中的運算式，一直到cond的結果為false，則跳出迴圈。考慮以下的程式片段：
<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，這個迴圈將永遠終止跳出，而不會有下一次的執行機會。

书籍推荐