Skip to main content

迴圈 for loop

在 JavaScript 裡面有幾種讓程式碼不斷重複執行的方式，其中一種就是 for loop 迴圈。

基本語法：

for(一開始要做的事; 迴圈繼續執行的條件; 每圈結束以後要做的事) {
}

基本使用#

for(let i=0; i<=2; i++) {
console.log(i)
}

上述範例會依序輸出 0 到 2，執行流程是這樣的：

  1. 先做「一開始要做的事」，就是 let i=0
  2. 再判斷「迴圈繼續執行的條件」是否符合，條件為 i<=3，符合
  3. 執行迴圈內容：console.log(i)，印出 0
  4. 執行「每圈結束以後要做的事」，i++，i 變成 1
  5. 判斷「迴圈繼續執行的條件」是否符合，條件為 i<=3，符合
  6. 執行迴圈內容：console.log(i)，印出 1
  7. 執行「每圈結束以後要做的事」，i++，i 變成 2
  8. 判斷「迴圈繼續執行的條件」是否符合，條件為 i<=3，符合
  9. 執行迴圈內容：console.log(i)，印出 2
  10. 執行「每圈結束以後要做的事」，i++，i 變成 3
  11. 判斷「迴圈繼續執行的條件」是否符合，條件為 i<=2，不符合
  12. 迴圈終止

常見錯誤#

執行順序搞混#

宣告初始值時如果用 let，那這變數的 scope 就是 for loop 這個區塊當中，有些人會使用 var：

for(var i=0; i<=2; i++) {
console.log(i)
}
console.log('after loop:', i) // 3

因為 var 的 scope 是 function，所以 i 在迴圈結束之後依然存在。

在迴圈結束之後印出 i，有些人會以為是 2，但上述範例中其實會是 3，因為當 i=3 時判斷式 i<=2 是 false，所以才跳出迴圈的。要記得迴圈的最後一步是 i++，所以是 i 先等於 3，然後才判斷 i<=2 的。

寫出無窮迴圈#

如果要把迴圈倒著跑，有些人會忘記把 i++ 改成 i--：

for(let i=10; i>0; i++) {
console.log(i)
}

這樣就會造成無窮迴圈，因為 i 會一直遞增，所以 i>0 永遠都是 true，迴圈永遠不會結束。

範圍搞不清楚#

繼續執行的條件有些人會寫成：i<n，有些人會寫：i<=n，對新手來說可能沒辦法第一時間判斷出最後的值會是多少：

for(let i=1; i<10; i++){
}
for(let i=1; i<=10; i++) {
}

只要找最後一個符合執行條件的 i 就行了，例如說 i<10，如果 i 是 10 的話不符合，是 9 才符合，所以迴圈的最後一圈 i 就會是 9，執行完畢以後 i 會是 10。

i<=10 同理，最後一圈 i 會是 10，跑完之後 i 會是 11，然後跳出迴圈。

Edit this page