JS學習：流程控制 - 迴圈、Switch

迴圈

當碰到要重複許多相似操作的情況時，可慮使用的迴圈

迴圈三要素

迴圈的設計通常有以下的步驟，其中最重要的是確保迴圈三要素的正確

1. 確定迴圈內容，也就是哪些事情要重複執行，重複的指令稱為循環體
2. 確定迴圈變數，用來控制迴圈的開始與結束
3. 迴圈三要素：

• 迴圈初始化

          也就是需要先設置迴圈變數的初始值

• 迴圈條件運算式

         也就是需要重複執行的條件，如果條件為 True ，則繼續執行下一個迴圈；否則，結束迴

         圈迴圈的條件除了限定執行的範圍外，更重要的是提供終止迴圈的條件，當一個迴圈無

         法達到終止條件，該迴圈會形成無窮迴圈，也稱之為閉環，在某些語言中會顯示錯誤

• 循環體中必須要有更改迴圈變數值的語句

          如果迴圈變數值不改變，迴圈就無法終止，除非有外部其他程式碼改變迴圈變數值，否

          則就會是閉環

While

While 的意思是「當....的時候，做....」，也就說當條件符合時，執行循環體，如下：

while ( 迴圈條件 ) {
    循環體
}

如果以上一章的找書例子來實作的話，如下：

let i = 0;
while ( i < box.length ) {
  
    if ( box[i] == targetBookName ) {
        console.log( '找到了' );
    }
    i++;
}

do-while 

使用while時，首先會判斷是否符合迴圈條件，符合的話再執行循環體，而 do-while 則相反，先執行循環體，再判斷是否符合條件，符合的話再繼續執行，因此 do-while 一定會執行至少一次

do {
    循環體
} while ( 迴圈條件 )

for

相較於 while ，for 迴圈比較靈活，也是最常使用迴圈語法，如下：

for ( 初始化 ; 迴圈條件 ; 步進 ) {
    循環體
}

步進 ( Step ) 指的是每一次進行迴圈時，對迴圈變數值所做的變化

同樣的使用找書的例子：

for ( let i = 0 ; i < box.length ;  i++ ){
    if ( box[i] == targetBoxName ){
        console.log( ' 找到了 ' );
}

for 迴圈可以將括號內的初始化、迴圈條件、步進 通通為空，分別寫在迴圈內外，只要確保迴圈三要素正確即可，如下：

let i = 0;
for ( ; ; ) {
    if ( box[i] == targetBookName ) {
        console.log( ' 找到了 ' );
    }
    i++;
    if ( i >= box.length ) break;  // 跳出迴圈
}

也可以使用逗點 (，) 增加初始化、迴圈條件、步進，如下：

for ( 初始化1 , 初始化2 ; 條件1 , 條件2 ; 步進1 , 步進2 ) 

for...in

for...in  是用來列舉一個集合中的所有元素，集合為收集起來的一個或一堆東西，像是 Array 和 Object 都屬於集合

雖然 Array 的索引一定是由 0 開始，可以用 for 處理，但是對於 Object 而言，需要先知道 Key 才能存取，因此 for...in 是為了在不知道 Key 時，也可以存取 Object 成員，如下：

let testObj = {
    1 : '111',
    2 : '222',
    3 : '333'
}; 


for( let key in testObj){
    console.log( 'Key = ' + key + ' ,value= ' + testObj[key]);
}

break 和 continue 

break 和 continue 是用來控制迴圈流程，皆在循環體內使用，break 是直接跳出整個迴圈，而 continue 則是終止目前迴圈，直接進行下一次迴圈，兩者在使用時，位於 break 或是 continue 後方的語法皆不會執行，如果是在函數中，return 的效果與 break 是一樣

break 可以用來終止無窮迴圈、閉環的情況

在實務上對於多維陣列的處理上經常會使用迴圈裡加迴圈，這種時候的流程控制就很需要仰賴 break 和 continue，如下：

for(let i = 0 ; i < array.length ; i ++){
    for(let j = 0 ; j < array[i].length ; j++){
        if(array[i][j] == target) {
            console.log('找到了');
            break;  // 跳出子迴圈
        }
    }
}

switch

switch是用來處理選擇分支判斷，而且switch的判斷是使用全等於運算子 ( === ) ，因此需要值與型態都一致

舉個例子，在箱子裡拿一個水果，如果是蘋果則需要付5塊錢，如果是香蕉的話則是3塊錢，其他免費

switch(getFruit){
    case "蘋果":
        console.log('付5塊錢');
        break;
   case "香蕉":
        console.log('付3塊錢');
        break;
   default:
        console.log('免費');
        break;
}

 以上範例也可以使用 if-else 來完成，但是switch可以不用每一個分支加上 break ，如果該分支沒有 break 的話，則會往下執行下一個分支

現在多加兩種水果，如果是橘子的話也要付5塊錢，如果是柳丁的話，除了要付3塊錢，還有先準備購物袋

switch(getFruit){
    case "橘子":
    case "蘋果":
        console.log('付5塊錢');
        break;
    case "柳丁":
        console.log('準備購物袋');
    case "香蕉":
        console.log('付3塊錢');
        break;
    default:
        console.log('免費');
        break;
}

這種情況也可以使用 if-else 來完成，但是使用switch可以更為簡潔的表示