學習目標：for、while、do…while 用法
關於學習 JavaScript 的筆記，主要源自於以下學習資源：
JavaScript 中三種迴圈
在 JavaScript 中的迴圈有三種：（loop） for、while、while…do，在實作中最常用到的是 for、while。
不管是哪種迴圈都必須包含下面四個部分：
- 初始值（begin）
- 終止條件（condition）：當終止條件為
false時停止迴圈。 - 遞增或遞減的方式（step）
- 循環體（do）：每一迴圈要做的事情
[補充說明]每進入一次循環體我們就稱為 一次迭代，假設進入三次就稱為三次迭代
如何決定要用哪種迴圈？
在使用情境上我們可以依據是否知道「終止條件」來決定要用哪種迴圈，如果有明確的次數（例如：跑完整個陣列）就使用 for 、反之若是以條件（例如：比較大小、boolean 等）當作終止條件時，就使用 while。
以下就詳細說明三種迴圈的使用方式。
for 迴圈
- 最常使用到的迴圈方式
- 寫法
for(begin; condition; step){ // do}
- 舉例：印出 1 ~ 3
for (let i = 1; i <= 3; i++){ console.log(i);}
我們可以分成各個部分進行說明：
- 初始值（begin）：
let i = 1，設定一個變數 i 初始值為 1。 - 終止條件（condition）：
i <= 3，在進入迴圈前檢查 i 是否小於等於 3 。 - 遞增或遞減的方式（step）：
i++，當每次做完事情後執行 i += 1。 - 循環體（do）：
console.log(i)，印出 i。
- 其他需要注意的地方
- () 的
;為必須：將變數寫在括號中這樣的寫法稱為「內連變數聲明」，我們也可以用原有的變數當作初始值，這樣的寫法稱為「現有變數聲明」，但如果用後者的寫法還是必須在括號中添加;在最前方。
[內連變數聲明]for (let i = 3; i < 3; i++){ ... }[現有變數聲明]let i = 0for(; i < 3 ; i++){ ... }
2. 其實括號中的內容我們都可以刪除，但就會創造出一個無限循環，這樣會造成問題，所以不會有人這樣做。不過後面我們會講到如何在每一迴圈要做的事情放入終止條件。
[無限循環]for (;;){ ... }
while 迴圈
- while 的寫法相對於 for 來說更為簡單一些，是使用「現有變數作為初始值」，因此只需要把終止條件放入括號中就可以了，而 step 則是直接放在 do 的最後。
- 寫法
let i = 0; //beginwhile (condition){ //do i++ //step}
- 舉例：印出 1 ~ 3
let i = 1;while (i <= 3){ console.log(i); i++}//1, 2, 3
do while 迴圈
- 與 while 迴圈的差異在於 while 是先檢查終止條件（condition）再執行循環體（do）， do while 則是相反是先執行循環體（do）後再檢查終止條件（condition）。因此使用 do while 迴圈時要特別注意！「不管條件是否為
true」，都至少會執行一次。 - 舉例
let i = 3;while (i < 3){ console.log(i); i++}//無let i = 3;do { console.log(i); i++}while (i < 3)//3
如何看懂迴圈
這是非常重要的事情，程式是照著你寫的跑而不是你想的跑，當發現結果不符合預期時，要如何除錯（debug）？這時候你可以試試下面兩種方式
- 人體編譯器
- Debugger
由於在 [課程學習筆記 ]先別急著寫 leetcode — 一步步打造程式腦，有詳細說明，這邊就不佔篇幅了
跳出迴圈的標籤
在一開始的時候有提到，寫迴圈都會有帶上終止條件（condition），不然就會產生無限循環，其實還有另一種方式是將終止條件透過標籤寫在循環體（do）中 ，更特別的是可以根據條件跳過此次迭代。但現在很少使用這兩個寫法，因為就在一開始設好終止條件程式碼的可讀性比較高，我們也可以透過 if 來跳過迭代，所以可以稍稍了解即可。
break
- 強制退出循環
- 通常搭配 if 條件式使用
- 舉例
let score = +prompt("分數總和",""); //輸入分數。if ( !score ) break; // 如果輸入一些字符串則停止迴圈，sum += score; //分數加總}alert(sum); //跳出顯示[補充] +prompt 若輸入一些字符串，它將返回NaN
continue
- 停止當前迭代，執行下一次。
- 通常搭配 if 條件式使用。
- 優點：可以減少 if 的嵌套。
- 舉例
//跳過偶數let i = 0;
for(i = 0 ; i < 10; i++){
if( i % 2 == 0 ) continue;
alert(i);
}//但其實也等同於for(i = 0 ; i < 10; i++){
if( i % 2 != 0 ) {
alert(i);
}
}
重點整理
- 在 JavaScript 中有三種迴圈： for while do…while。比較常使用的迴圈是 for while這兩種。
- while do…while 的差異在於檢查終止條件的時間點。
- 我們可以透過練習人體編譯器或使用 chrome 的 debugger 來了解迴圈的運作。
- 可以透過 break 與 continue 標籤來跳出迴圈或跳過當前迭代（但現在比較少人使用這種方式）。
