迴圈是什麼｜for、while、forEach 差異｜JavaScript 新手筆記
更新日期： 2024 年 9 月 14 日
小弟身為一位正在學習 JavaScript 的初學者，在學習「迴圈」的概念時一直難以理解。
始終搞不清楚「for」、「while」、「forEach」等迴圈間的差別。
最近又重新複習了相關概念後，才擁有比較清晰的概念，因此以本文整理相關內容作為筆記用途。
迴圈是什麼
在程式語言中，我們有時會需要重複執行某些任務（函數）。
例如：詐騙網站每當有新使用者進入，就要重新跳出一個恭喜訊息：「恭喜是你本站的 1000 位使用者，留下信用卡資料即可領取 iphone」。
又或者我們有一個非常長表格，我們需要按照「紅、橙、黃」這個顏色順序，不斷填入該表格中，直到表格填滿為止。
以上情境，都會需要某一個特定的程式碼不斷重複執行。
當然，我們可以使用複製貼上大法，在代碼編輯器中重複黏貼該段程式碼。
但要記住，當我們需要使用複製貼上時，代表我們一定有個地方想錯了，因為程式語言已經提供另一個更方便的功能，讓我們不斷重複執行特定代碼，那就是：迴圈。
迴圈是撰寫程式語言中，最常使用的一個功能，因為它提供以下三個優點。
- 節省撰寫代碼的時間
- 減少人工重複工作時會產生的錯誤
- 讓程式碼易於閱讀
一般來說，常見的迴圈共有三種型式。
- while 迴圈（狀態控制迴圈）：根據特定狀態，判定是否要繼續重複執行程式碼
- for 迴圈（計數控制迴圈）：根據設定的重複次數執行程式碼
- forEach 迴圈（集合控制迴圈）：針對某清單內的每一個要素，重複執行特定的程式碼，直到將所有要素都執行過一遍才停止。
以下，我們分別說明相關概念。
For 迴圈是什麼
當我們有個明確的「數量」，想要告訴電腦重複執行特定次數的程式碼，這時候就可以使用 for 迴圈。
它的代碼可以如以下理解：
for(寫入要重複幾次){
寫入要執行的程式碼;
}具體來說，for 迴圈的架構是由以下三個組成
外框架
若想要使用此功能，需要有 for 此關鍵字，接在 for 後面需要放左、右圓括號「( )」，圓括號後面再放左右尖括號「{ }」
for( ){
}要執行的次數
寫好外框架，接著要告訴電腦需要執行的次數，也就是所謂的「條件設定」。
設定條件次數時，需要填寫 3 個資訊：起始位置、終止位置，累進方法。此外，每個資訊需要以分號「;」劃分。
上述三個條件描述看起來非常困難，看都看不懂。
別擔心，如果我們想要重複 n 次，就會採用以下方式宣告
let i=0 ; i< n ; i++
想要重複 3 次，就將 n 取代成 3 ，想要重複 4 次，就將 n 取代成 4。
以下以 3 次作為範例。
for( let i=0 ; i < 3 ; i++ ){
}要執行的程式碼
最後將想要執行的程式碼，寫進尖括號中，即可順利使用迴圈的功能。
例如我想要執行一個叫 callMeByYourName 的函數，並且重複三次。
for( let i=0 ; i < 3 ; i++ ){
callMeByYourName();
}while 迴圈是什麼
當我們不知道需要執行多少次，卻有個明確的「狀況」，想要告訴電腦重複執行特定次數的程式碼，這時候就可以使用 while 迴圈。
它的代碼可以如以下理解：
while(走到張學友演唱會購票現場時){
大喊:「我愛黎明」
}以上代碼，表示當我們走到演唱會現場時，就要不斷重複喊：「喊我愛黎明」。
而當我們因為被逮捕而帶離現場時，則不再亂喊。
具體來說，while 迴圈的架構是由以下二個組成
外框架
若想要使用此功能，需要有 while 此關鍵字，接在 while 後面需要放左、右圓括號「( )」，圓括號後面再放左右尖括號「{ }」
while( ){
}判斷條件
while 是藉由某個特定情況，判斷是否要繼續重複執行代碼。
因此我們需要告訴 while 何時應該執行，也就是只要當圓括號內的條件是「正確」時，就會不斷執行尖括號內的程式碼，直到該情況不再符合特定條件才會停止。
例如，我可以設定一個變數稱為當下氣溫，條件判斷則為大於 20 度，則要一天喝一杯思樂冰。
而當溫度小於 20 度時，就不要再喝思樂冰了。
let temperature = 當下氣溫
while( temperatur > 20 ) {
喝思樂冰
}
如果看完以後還有不懂的地方，也可以參考這部影片。
forEach 迴圈是什麼
除了以上 for 迴圈與 while 迴圈，JavaScript 還有另外提供一種迴圈功能叫：迭代器（iterator）
名詞解釋：迭代（iterate）
「迭代」就是一種重複執行的概念。
例如，我想要檢查自己的 UberEat 的購物車中，是不是有漏點了鹹酥雞，因此將清單由上而下的檢查一遍。
上述這種某種資料（例如清單）執行某種動作（檢查是否漏點）情況，就稱為迭代。
檢查一次，就是迭代一次，檢查兩次，就是迭代一次。
當我們想要針對特定的資料型態（例如包含龐大資料量的陣列與物件），重複執行某一段程式碼，這時就可以使用專門用來迭代的「迭代器」相關功能。
在眾多系統內建的迭代器中，本文解析的 forEach 只是其中一種。
除此之外還有各式各樣的功能，讓使用者根據自己的需求去挑選。
例如以下迭代器：
- map：用來另外新建一份複製的資料
- filter：用來篩選資料
- findIndex：用來找到特定資料在資料堆中的位置
- reduce：用來串聯資料堆，並將資料縮減成單一數值（例如總和數值）
如果你有使用 Excel 或 SpreadSheet 的經驗，相信你對迭代器的資料處理功能，應該不陌生。
回過頭來說明，forEach 迴圈的架構是由以下二個組成。
外框架
若想要使用此功能，需要有 for 此關鍵字，接在 for 後面需要放左、右圓括號「( )」，接在圓括號後面，要放上一個分號「;」
資料.forEach(
)要執行的程式碼
接著，再將想要執行的程式碼，寫進圓括號中，即可順利使用迴圈的功能。
例如我想要執行一個叫檢查是否有買到沙茶醬，才為以下程式碼。
購物清單.forEach(
檢查是否有有買到沙茶醬
)看到這裡，你可能會有兩個問題：
- 為什麼不用設定重複的次數，或是判斷何時重複執行的條件
- 程式碼不是應該要放在尖括號裡面嗎？怎麼可以放到圓括號中呢！？
針對以上問題，我們一一為你解答。
首先回答，「為什麼不用設定重複的次數，或是判斷何時重複執行的條件？」
由於 forEach 功能的預設，是針對該資料內的所有元素都會執行過一遍特定功能。
因此它跟 for 與 while 不同，不需要設定判斷條件、執行次數等相關資訊。
再來第二個問題：「執行動作的程式碼，不是應該要放在尖括號裡面嗎？怎麼可以放到圓括號中呢！？」
一般來說，我們從 for 與 while 的例子來看，可以推斷圓括號通常是放某個「設定參數」。
例如 for 是「重複n次」的參數，while 是「某情況是否符合特定需求」的參數。
而 forEach 這個功能，它的參數則是可以放某個「動作」。
從第一眼看起來，可能會誤以為執行動作的程式碼是放在圓括號內，但事實上它真正的位置還是放在尖括號中，只是我們使用了簡化的呈現方式。
實際上它的程式碼是如此：
購物清單.forEach(
檢查是否有有買到沙茶醬
)
function 檢查是否有買到沙茶醬(){
取得沙茶醬的名稱
比對購物清單
如果有沙茶醬就回傳「有」
如果沒有沙茶醬就回傳「沒有」
}我們在舉個另一個例子，假如我們有一盒雞蛋，我們希望能將每顆雞蛋都能做成一份蛋餅。
套用到 forEach 函數時，就會有以下程式碼：
雞蛋盒.forEach(
做成蛋餅
)
function 做成蛋餅(){
打開蛋盒
挑選一顆雞蛋
將雞蛋敲開並放到鐵板上
鋪上麵皮
等熟了捲起來放在一個盤子上
}或是結合起來的版本。
雞蛋盒.forEach(
function(雞蛋){
打開蛋盒
挑選一顆雞蛋
將雞蛋敲開並放到鐵板上
鋪上麵皮
等熟了捲起來放在一個盤子上
}
)當然，我們不需要指定需要重複這個動作幾次，只要盒子中有幾顆蛋，就會製作出幾份蛋餅。
補充：回調函數（Callback Function）
當一個函數裡的圓括號裡面放的參數，是放另一個函數時，我們會稱該函數參數為「回調函數」（Callback Function）。
乍聽之下，你可能覺得異常詭異，因為通常參數都是放一個資料內容，例如：文字、數字、布林值，怎麼可以放進另一個函數呢！？
這裡我想請大家放開心胸，有時候 JavaScript 這種開放性會讓人不知所措，覺得毫無規則可言。
但當你深入了解，細細領略後就能之後「回調函數」的用意了。詳細介紹可以參考這篇文章。
實際的程式碼可以參考以下影片。
總結
除了上述三種迴圈外，在 JavaScript 中仍許多迴圈等著各位去吸收、學習。
一開始看到可能會覺得有點難，但若是著去拆解當中的原理，想必一定會順利學習收穫。
以上就是這次關於迴圈的介紹，希望能用比較白話的方式解析，幫助程式小白更容易理解 JavaScript 的內容。