今天要寫的內容，是我完全沒有練習過，也沒有在課堂上學過的方法，那麼為什麼我還是要寫這篇文章呢？原因是因為，即使在我的課程裡 for 迴圈算是被 forEach 取代，我卻仍然可以在各個地方看到 for 迴圈，這其實讓我蠻慌的....

因此今天我就逼自己自學 for 迴圈了，嚴格來說在寫這篇文章前，其實已經有對 for 迴圈做了一點筆記，但因為疏於練習，其實也忘的差不多了(汗)，今天就當作複習吧。

迴圈

重複執行一組程式碼，並且檢測條件，如果檢測結果為 true 就會繼續執行，直到檢測到 false 才會停止執行；我們可以想像成倉鼠跑滾輪，如果都沒有任何 false，就會無限的跑下去。

迴圈有很多種形式，但在這裡只會拿幾個出來討論：

1. for
2. while
3. do...while
4. break
5. continue

for

當變數值與設定值的條件符合就會執行，直到不符合為止。

語法：

for ( 變數 = 初始值 ; 變數 < 條件值 ; 變數 + 步進值 ) {
　// 要執行的程式碼
}

執行 for 迴圈時，會有以下過程：

• 如果條件符合，變數 = 初始值便會被執行。變數的部分可以自定義。
• 變數 < 條件值 這裡的條件會先被檢測，如果符合 true 便會執行，如果是 false 便會終止迴圈，這邊如果沒有設定條件，則會形成無限迴圈。
• 變數 + 步進值 會對每一次的執行產生變化。

簡易實例操作：

我有一座農場，裡面有 400 隻豬、700隻雞、2000 隻牛、10 隻羊，我的農場動物加總。

let farmAnimals = [ 400, 700, 2000, 10 ];
let animal_num = 0;

for ( let i=0; i<farmAnimals.length; i++) {
    animal_num += farmAnimals[i];
}

console.log( animal_num ); // 3110

如果情境改成這樣：

我有一座農場，裡面有 400 隻豬、700隻雞、2000 隻牛、10 隻羊，除了豬以外我有多少動物。

let farmAnimals = [ 400, 700, 2000, 10 ];
let animal_num = 0;

for ( let i=1; i<farmAnimals.length; i++) {
    animal_num += farmAnimals[i];
}

console.log( animal_num ); // 2710

以上兩個範例，大略的解釋一下發生了什麼事，第一個範例 animal_num = 0 因此我們初始值為 0 ，i=0 於是從 farmAnimals 陣列第 0 筆資料開始跑，跑到 farmAnimals 陣列資料的最後一筆數量 10，並且設定跑到第四次就會停止，也就是上面 i<farmAnimals.length 這個條件，在步進值(每一次迴圈產生變化)的地方設定 i = i + 1 最後獲得了所有資料的加總。

那麼第二個範例為什麼數字變了？因為 i=1 的情況下，是從 farmAnimals 陣列第 1 筆資料開始跑，因此豬的部分就沒有被計算進去了。

while

只要指定的條件為 true 就執行，直到條件不符合為止，不過與 for 迴圈不同的地方是，for 適合需要跑完全部陣列的情況；while 比較適合用在以條件當作終止條件的時候，譬如：比較大小、布林值。

語法：

while (condition)
  statement

直接進行範例：

// 範例：印出 1 ～ 5
let i = 1;
// i <= 5 為終止條件
while (i <= 5){
   console.log(i);
   i++
}
//1, 2, 3, 4, 5

這裡要注意的是，如果底下 i++ 忘記放，會造成嚴重的後果，這個迴圈會不停的運轉，瀏覽器會直接爆炸，因此在練習的時候也要注意不要忘了寫上去。

這個範例為，只要 a 小於 3，便會不斷的重複執行：

let a = 0;
let b = 0;
while (a < 3) {
  a++;
  a += b;
}

每一次疊代都會增加 a 的值，並且把值加到 b 上面，分析起來為以下狀況：

• 第一次迴圈 a = 1、b ＝ 1
• 第二次迴圈 a = 2、b ＝ 3
• 第三次迴圈 a = 3、b ＝ 6

所以在第三次會判斷 a 不小於 3 (不是 true)，而終止迴圈。

每進入一次循環體我們就稱為一次疊代，假設進入三次就稱為三次疊代

do while

while 是先檢查終止條件，再執行迴圈；do while 則是先執行迴圈，再檢查終止條件，因此 do while不管條件是否為 true，都會至少跑一次，接著 while 判斷條件是否要繼續執行，若要執行就會進行第二輪，不執行則跳出迴圈；要注意的是，while 的小括號是迴圈結束的地方，後面要加上分號，並且要確認無誤後再開始測試迴圈。

語法：

do
  陳述式
while (條件式);

這個範例中，do 迴圈重複至少一次，並且他會繼續不斷重複到 a 不再小於 5。

let **a = 0;
do {
  a += 1;
  console.log(a);
} while (a < 5);**

break

break 意思為中斷整個迴圈，當我們希望他滿足條件就停下來而不用全部跑完的時候，就可以使用 break。

範例：

let farmAnimals = [
    {
        animal: 'pig',
        num: 400,
    },
    {
        animal: 'chick',
        num: 700,
    },
    {
        animal: 'cow',
        num: 2000,
    },
		{
        animal: 'sheep',
        num: 1000,
    }
]

我們先建立一個陣列資料，然後示範一個正常能夠撈出資料的迴圈，可以看見他會跑完所有的資料：

for(var i=0; i<farmAnimals.length; i++){
    console.log(farmAnimals[i].num); // 400, 700, 2000, 10
}

假如我們希望這個迴圈只幫我們撈出豬，這時候就可以使用 break 方法。

for(let i=0; i<farmAnimals.length; i++){
    if(farmAnimals[i].num < 1000){
        console.log(farmAnimals[i].animal);
        break;
    }
}

另外，這裡不會跳出數量也小於 1000 的雞，是因為迴圈在跑了一次之後，已經達成了條件並且被中斷，因此不會再跑第二次，此時就不會檢測到第二筆雞的資料了。

continue

continue 會滿足條件後直接繼續下一次的迴圈。

我們知道除了 break 方法以外，其他迴圈方法都會跑滿每一個步驟，在這裡 continue 則是只跑滿足的條件。

舉例來說，我有一座農場，農場裡有好幾座場房，每一個場房都要隔出三個區塊，這三個區塊裡面至少要有一個區塊是養雞，以其他迴圈來說，100個場房裡面的三個區塊都會跑過一遍，而 continue 則是在一個場房的區塊裡面只要檢查到有一區是養雞的，則會跳過另外兩區，直接檢查下一間場房，範例如下：

for(let i = 0; i <= 100; i++){
    console.log(`正在找第 ${i} 間場房`);
    if(左邊){
        console.log("找到了，下一間")
        continue;
    }
    if(中間){
        console.log("找到了，下一間")
        continue;
    }
    if(右邊){
        console.log("找到了，下一間")
        continue;
    }
    console.log("沒有雞")
}

使用 continue 如果在一間場房裡面發現一個區塊有養雞，就會直接進行下一間，不會再跟你說「還有兩區沒有養雞哦」，但是跑完 100 間場房後發現都沒有養雞的時候，就會跟你說「你這個農場都沒有雞」。

為了介紹迴圈方法，自己也在撰寫的過程中努力的嘗試理解，很開心替自己的小腦袋增加了新的知識。另外，在使用迴圈的時候，為了避免無限迴圈，確定迴圈內的判斷式終究會變成 false 這件事真的很重要，否則造成程式大當機可是會很麻煩的，我在測試的過程中有好幾次瀏覽器動彈不得，這篇文讓我不停的冷汗直流.......

參考資料：
MDN
30 天 Javascript 從入門到進階：迴圈
迴圈筆記