迴圈是什麼|JavaScript 新手筆記

更新日期: 2023 年 1 月 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