迴圈是什麼｜for、while、forEach 差異｜JavaScript 新手筆記

By徐培鈞
LinkedIn

更新日期： 2023 年 2 月 7 日

小弟身為一位正在學習 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(
    檢查是否有有買到沙茶醬
)

看到這裡，你可能會有兩個問題：

  1. 為什麼不用設定重複的次數，或是判斷何時重複執行的條件
  2. 程式碼不是應該要放在尖括號裡面嗎？怎麼可以放到圓括號中呢！？

針對以上問題，我們一一為你解答。

首先回答，「為什麼不用設定重複的次數，或是判斷何時重複執行的條件？」

由於 forEach 功能的預設，是針對該資料內的所有元素都會執行過一遍特定功能。

因此它跟 for 與 while 不同，不需要設定判斷條件、執行次數等相關資訊。

再來第二個問題：「執行動作的程式碼，不是應該要放在尖括號裡面嗎？怎麼可以放到圓括號中呢！？」

一般來說，我們從 for 與 while 的例子來看，可以推斷圓括號通常是放某個「設定參數」。

例如 for 是「重複n次」的參數，while 是「某情況是否符合特定需求」的參數。

而 forEach 這個功能，它的參數則是可以放某個「動作」。

從第一眼看起來，可能會誤以為執行動作的程式碼是放在圓括號內，但事實上它真正的位置還是放在尖括號中，只是我們使用了簡化的呈現方式。

實際上它的程式碼是如此：

購物清單.forEach(
    檢查是否有有買到沙茶醬
)

function 檢查是否有買到沙茶醬(){
    取得沙茶醬的名稱
    比對購物清單
    如果有沙茶醬就回傳「有」
    如果沒有沙茶醬就回傳「沒有」
}

我們在舉個另一個例子，假如我們有一盒雞蛋，我們希望能將每顆雞蛋都能做成一份蛋餅。

套用到 forEach 函數時，就會有以下程式碼：

雞蛋盒.forEach(
    做成蛋餅
)

function 做成蛋餅(){
    打開蛋盒
    挑選一顆雞蛋
    將雞蛋敲開並放到鐵板上
    鋪上麵皮
    等熟了捲起來放在一個盤子上
}

或是結合起來的版本。

雞蛋盒.forEach(
    function(雞蛋){
      打開蛋盒
      挑選一顆雞蛋
      將雞蛋敲開並放到鐵板上
      鋪上麵皮
      等熟了捲起來放在一個盤子上
   }
)

當然，我們不需要指定需要重複這個動作幾次，只要盒子中有幾顆蛋，就會製作出幾份蛋餅。

補充：回調函數（Callback Function）

當一個函數裡的圓括號裡面放的參數，是放另一個函數時，我們會稱該函數參數為「回調函數」（Callback Function）。

乍聽之下，你可能覺得異常詭異，因為通常參數都是放一個資料內容，例如：文字、數字、布林值，怎麼可以放進另一個函數呢！？

這裡我想請大家放開心胸，有時候 JavaScript 這種開放性會讓人不知所措，覺得毫無規則可言。

但當你深入了解，細細領略後就能之後「回調函數」的用意了。詳細介紹可以參考這篇文章。

實際的程式碼可以參考以下影片。

看不懂英文可以用字幕自動翻譯，比較好理解

總結

除了上述三種迴圈外，在 JavaScript 中仍許多迴圈等著各位去吸收、學習。

一開始看到可能會覺得有點難，但若是著去拆解當中的原理，想必一定會順利學習收穫。

以上就是這次關於迴圈的介紹，希望能用比較白話的方式解析，幫助程式小白更容易理解 JavaScript 的內容。

Similar Posts