重新認識迴圈

沒有那麼複雜。

從 label 與 goto 來理解迴圈的本質

先介紹這兩個東西是因為不管是哪種迴圈，本質都是這三樣東西：

1. 初始值
2. 終止條件
3. 每一圈要做的事（更新控制迴圈的變數值）

如果把每種迴圈的步驟拆出來分析，會發現背後的概念都是用label 跟 goto 來實作的。

（JavaScript 沒有這個語法，純粹只是要解釋這個概念）

var i = 1  // 初始值
loop: // label
console.log(i) // 每一圈要做的事
i++   // 更新控制迴圈的變數
if (i <= 10) { // 終止條件
  goto loop    // goto lbael (loop) 
}
console.log('finished') // loop end

試著自己把一個步驟走過一遍：

1. 建立初始值 i = 1
2. loop 是標籤，不理它
3. 印出 i
4. 更新 i
5. 終止條件，i<=10 的話就跳回 loop
6. 印出 finished

最後你會發現這就跟你用迴圈的語法寫出來的結果一樣：

1
2
3
4
5
6
7
8
9
10
finished

do while 先做再說

因為 do while 不常用，所以還蠻常忘記它的語法。一個比較直覺的想法：一個迴圈就是一個 block，所以要做（do）的事情就放在 block 裡。

do while 的流程：

1. 初始值
2. 每一圈要做的事（更新控制迴圈的變數值）
3. 終止條件

var i = 0
do {
  console.log(i)
  i++
} while (i <= 10)

while 就是我熟悉的它

while 跟 do whie 最不一樣的地方是：「先判斷條件」，接著才執行迴圈區塊。

while 的流程：

1. 初始值
2. 終止條件
3. 每一圈要做的事（更新控制迴圈的變數值）

單舉例子太無聊了，所以做點有趣的：

var i = 0
while (i <= 10) {
  console.log(i++)
}
console.log('i = ', i)

i++ 寫在 log 也沒問題哦！（不知道為什麼的話罰你回去看 i++ 是什麼意思）

for loop

其實 for 跟 while 的流程是一樣的：

1. 初始值
2. 終止條件
3. 每一圈要做的事（更新控制迴圈的變數值）

只是 while 的結構寫起來沒有那麼好讀：

var i = 0 // 初始值
while (i <= 100) {  // 終止條件
  console.log(i)
  // ...
  i+=2 // 每一圈要做的事
}

for 把東西都寫在一行裡，一目了然：

// 同一行所以要句點
for (var i=0; i<=100; i++) {
  console.log(i)
  // ...
}

在幫你複習一下，如果你用 label 跟 goto 的概念來解析 for 跟 while 的話，會發現做的事情都一樣：

var i = 0
:check if (i<=10) {
  console.log(i)
  i++
  goto check
}
console.log('finished')

1. 初始值
2. 終止條件（不符合就跳第五步）
3. 執行迴圈 block（更新控制變數的值）
4. 跳回第二步
5. 結束

break 與 continue

即便迴圈本身已經自帶「終止條件」，但有些時候我們會想要在執行「迴圈 block」的過程中來控制迴圈的執行流程：

1. 跳出迴圈
2. 忽略掉那一圈要做的事情

這個時候 break 跟 continue 就派上用場了。

break

碰到 break 時，不會執行之後的指令，直接跳出迴圈。

這裡利用 break 來在迴圈區塊中建立終止條件：

var i = 0
do {
  console.log(i)
  i++
  if (i > 100) {
    break
  }
} while (true)
console.log('i=', i)

儘管 while (true) 會蹦出一個「無窮迴圈」，但因為我們在迴圈區塊使用了 break 來控制流程，所以在 i=101 的時候，迴圈就會結束。

continue

碰到 continue 時，不會執行之後的指令，直接跳下一圈迴圈。

這裡寫一個碰到奇數就跳下一圈的迴圈：

var i = 0
do {
  if (i&1) {
    i++
    continue
  } 
  console.log(i)
  i++
} while (i <= 10)

簡單的應用

用三種不同的迴圈來「印出分數的總和」

1. do while

var i = 0
var scores = [70, 32, 52, 66, 90]
var sum = 0
do {
  sum += scores[i]
  i++
} while(i<scores.length)

console.log(sum)

2. while

var scores = [70, 32, 52, 66, 90]
var sum = 0
var i = 0
while (i<scores.length) {
  sum += scores[i]
  i++
}
console.log(sum)

3. for

var scores = [70, 32, 52, 66, 90]
var sum = 0
for (var i=0; i<scores.length; i++) {
  sum += scores[i]
}
console.log(sum)

i<n 跟 i<=n 的理解方式

剛開始學迴圈的時候很常會搞混 < 跟 <= 的差別。其實有個簡單的判斷法：

1. i<5，只會執行到 4
2. i<=5，會執行到 5

我的記法是只要看到 <=，就表示一定會碰到 n；不是的話就是 n - 1

搭配 Array.length 使用的時候，通常都是寫 <，因為「索引值」是從 0 開始，所以假設長度是 5，最後一個索引值就會是 4：0 => 1 => 2 => 3 => 4