前言

因為之後舉例會提到迴圈的概念，為了讓後面講解更順暢，今天我們要暫時離開一下 JS 學徒特訓班教學影片和練習題，聊聊 for 與 while 迴圈。

即使不會 JS ，相信你或多或少曾經聽過這個名詞。迴圈是指不停的輪迴(？)，直到因為某個緣故，例如達成條件，讓迴圈停下來，基本上就跟某些恐怖片或懸疑片的設定差不多(喂)。如果沒有讓這個輪迴停下來，迴圈會變成無窮迴圈，電腦一直跑同樣的程式跑到掛掉。相信你不會希望陷入這種鬼打牆的困境，那我們來一起找到迴圈中的綠洲吧！

注意，今天的文章會運用單元運算子和指派運算子，如果還不知道這兩個是什麼，請先回去看 03 運算子！

while 迴圈

while 迴圈的語法相當好懂：

while(判斷){
    符合判斷時，要做的動作;
}

如果判斷的結果是 true ，就執行{}裡的動作，如果是 false ，就跳過整段程式碼不執行。讓我們直接來寫練習題吧！我想要設計一個程式碼，讓他能依序跳出 0<5 、 1<5 、 2<5 、3<5 、 4<5 ，可以怎麼寫呢？

let a = 0; //宣告a一開始是 0
while(a<5){ //當a<5
    alert(a+"<5"); //依序跳出a<5
    a++; //並讓a+1成為新的a，繼續跑這個while迴圈
};

上面的範例，會依序從 0 開始跑，因為 0<5 ，因此執行{}裡的內容，跳出 0<5 ，並讓 0+1 後成為新的 a 。新的 a 是 1 ，還是小於 5 ，所以會繼續跑{}的動作。直到 a 變成 4 ，並跳完 4<5 ， 4+1 成為 5 ，離開{}後因為不再小於 5 ，不會再執行內容，迴圈終止。

應該不難理解吧？那我們來練習另一題。我想設計一個程式，讓 1 一路加到 50 ，然後讓電腦直接告訴我答案，要怎麼寫？

想到了嗎？我要公布答案囉。

let sum = 0; //宣告總數一開始是0 
let i =1; //i是要加的數，並設定從1開始加

while (i<=50){ //當要加的數字小於等於50就繼續加
    sum += i; //總數=本來的總數加上要加的數
    i++; //i加一
};

alert(sum); //印出總數

在這個進階題中，我們需要宣告兩個東西：總數和要加的數，總數就等於之前的總數加上要加的數。再運用 while 迴圈，控制要加的數字不要超出 50 的範圍，便能輕易得到答案啦！

for 迴圈

學會比較容易看的 while 迴圈後，讓我們進入 for 迴圈。

for(初始;判斷;迴圈){
    符合判斷時，要做的動作;
}

一開始看語法可能會覺得很複雜，但讓我們回頭拆解剛剛 while 的例題，把它改寫成 for 迴圈，就能理解 for 迴圈在說什麼了。

let sum = 0; //宣告總數一開始是0 
let i =1; //這是初始

while (i<=50){ //i<=50是判斷
    sum += i; //這是要做的動作
    i++; //這是迴圈
};

alert(sum); //印出總數

我想上面比較難判斷的應該是要做的動作和迴圈的部分。可以把迴圈理解成在{}繞出來後會先執行的區塊，執行這部分後才會去進行下一階段的判斷。讓我們開始改寫吧：

let sum = 0; //宣告總數一開始是0 

for(i=1; i<=50; i++){
    sum += i;
}

alert(sum); //印出總數

是不是比 while 迴圈的寫法簡潔多了呢？

break 和 continue

最後，要講的是能強制跳出迴圈的 break 和能強制進行下次迴圈的 continue 。單純講上面的定義應該沒什麼問題，問題是該怎麼應用。讓我們來舉個例子：

let x=0;
while (x<=500){
    if(x==10){
        break;
    }
    x++;
}

你覺得上面的程式跑完以後， x 會是多少呢？

答案是 10 。其實這題很簡單，宣告 x 一開始是 0 ，當 x 小於等於 500 時進入迴圈，如果 x 等於 10 ，迴圈就強制停止，如果不等於， x 就依序加一。也就是 x 會從 0 一路變成 10 之後，迴圈強制被停止。

continue 也來練習看看吧！假設我現在想設計一個迴圈，可以知道 0-30 間有多少不能被 3 整除的數字。我可以利用 continue ，讓它只要不能被整除，次數就加一。能被整除，就強制進行下一次迴圈，不要讓次數加一。

這裡整除會用到 % 這個符號，舉例來說，我要寫能被 3 整除可以這樣表示：z%3==0。

那麼就可以開始寫了！

let sum=0; //次數一開始為 0 
for (let z=0; z<=30; z++){
    if(z%3==0){ //能被3整除
        continue; //強制回到for (let z=0; z<=30; z++)這句
    }
    sum++; //次數加一
}

再次強調一下，在上面的例題中，符合條件 z%3==0 時強制進行下一次迴圈，並不是讓 sum++ ，而是回到迴圈頭for (let z=0; z<=30; z++)這句。

此外也需注意， continue 只能在 while 、for 、 do/while 、 for/in 中使用。

學習與參考資料

網頁前端工程入門：Javascript 流程控制 - 迴圈 By 彭彭：https://www.youtube.com/watch?v=uvLMIXuuc-8&list=PL-g0fdC5RMbpqZ0bmvJTgVTS4tS3txRVp&index=12
W3school：https://www.w3school.com.cn/js/js_break.asp
js跳出迴圈的方法區別(break,continue,return)Script：https://www.itread01.com/p/1001077.html