網頁全端開發JavaScript_0927

迴圈 Loop


  • 當條件運算式成立時,就會重複執行某一段程式
  • 檢測條件,直到檢測到 false 才會停止執行
  • 遇到return會中止迴圈

for迴圈


  • 當變數符合條件就會執行,直到不符合為止
  • *適合用在需跑完全部陣列以及已 知道執行次數的情況

定義

                for ( 變數 = 初始值 ; 變數 < 條件值 ; 變數 + 步進值 ) { 
要執行的程式碼 }
                for(let i = 0; i < 5; i++) { 
console.log( i ); } 結果為 0,1,2,3,4

while迴圈


  • 當while後的條件成立,就會執行後方程式,反之若while後為false則不會執行
  • 適合用在以條件當作終止條件的時候,譬如:比較大小、布林值
  • 一定要設定終止條件,才不會造成無限迴圈

定義

                while  (condition) { 
要執行的程式碼 }
                let i = 0; 
                while( i < 5) { 
console.log( i ); i++ ; } 結果為 0,1,2,3,4

do while迴圈


  • while 是先檢查終止條件,再執行迴圈,do while 則是先執行迴圈,再檢查終止條件
  • 因此 do while不管條件是否為 true,都會至少跑一次
  • 再判斷條件是否要繼續執行,不執行則跳出迴圈

定義

               do {
                    陳述式;
                }
               while  (條件式);    
              
                let i = 5 ;
                do {
                     console.log(i);
                     i++;
                 }
                while(i < 5);    
                
                結果為
                5
               

巢狀迴圈 Nested Loop


  • 巢狀迴圈是指,在loop內部還有另一個loop的情況
  • 內部迴圈以及外部迴圈可以是任何類型,例如 while loop或 for loop
  • 內部迴圈將在外部迴圈的每次迭代中,從頭到尾執行一次
               for  (let i = 0; i < 2; i++) {
                 for  (let k = 10; k < 13; k++) {
                      console.log(i, k);
                    }
                  }

                  結果
                  0, 10
                  0, 11
                  0, 12
                  1, 10
                  1, 11
                  1, 12       
               
                let  counter = 0;
                  for  (let i = 0 ; i < 100 ; i++){
                    for  (let k = 0 ; k < 500 ; k++){
                      counter++;
                    }
                  }
                console.log(counter);

                   結果50000 //100*500   
                
                    
                    for  (let i = 0 ; i < 100 ;i++){
                        let  counter = 0;
                        for  (let k = 0; k < 500 ; k++){
                          counter++;
                        }
                        console.log(counter);
                      }
                    結果  會印出100次500
                

Break、continue關鍵字


Break

  • 用於終止迴圈,會中斷並跳出該迴圈
  • break後的程式不會執行
  • 若放在於巢狀迴圈中,只會終止 break 在的那層迴圈,其他迴圈若不受影響還是會執行
  • 若要終止整個巢狀迴圈,則需要使用return

continue

  • 跳過當次迴圈,強制進行下一次的迴圈
  • continue後的程式不會執行