[第四週] JavaScript —
迴圈（Loop）while、for

MiaHsu

5 min readMar 24, 2020

學習目標：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 標籤來跳出迴圈或跳過當前迭代（但現在比較少人使用這種方式）。

[第四週] JavaScript — 迴圈（Loop）while、for