JavaScript 流程控制是什麼？條件、switch 與 try...catch

程式一行一行的往下寫，執行的順序亦是如此！我們也可以設定一些條件來控制某行程式遇到某個狀況時，執行不同的程式邏輯，這就是 流程控制。

它在實務上幾乎無所不在：事件 觸發後要判斷點到的是哪個元素、表單送出前要檢查欄位有沒有填、跟伺服器要資料失敗時要顯示錯誤訊息，全都靠流程控制。

條件

條件成立時執行 if 裡的程式，不成立就執行另一段。依分支的多寡，有只寫 if、加上 else、再串 else if 三種寫法。

寫法	說明
if	條件成立才執行。
if...else	二選一，不成立時執行另一段。
if...else if...else	多個分支，由上往下逐一比對。
三元運算子	只有兩個結果且夠簡短時的一行寫法。

詳細用法請見 條件 。

switch

拿一個值去比對多個 case 選項，符合就執行對應的程式，都不符合則走 default。最容易忘的是 break，沒寫就會一路往下貫穿執行後面的 case。

關鍵字	說明
switch	指定要拿來比對的值。
case	列出要比對的選項，使用嚴格相等。
break	結束比對，忘了寫會往下貫穿。
default	都不符合時執行的預設區塊。

詳細用法請見 switch 。

try...catch

把可能出錯的程式碼放進 try，真的拋出例外時就由 catch 接住，程式不會直接中斷。catch 會拿到一個錯誤物件，可以判斷發生了什麼事。

區塊	說明
try	放進可能出錯的程式碼。
catch	接住錯誤，並取得錯誤物件。
finally	不論成功或失敗都會執行，適合收尾。
throw	主動拋出錯誤，交給外層處理。

詳細用法請見 try...catch 。

該用哪一種

情境	建議語法
判斷範圍、複合條件	if...else
同一個值比對多個固定選項	switch
可能出錯、需要接住錯誤	try...catch

真值與假值

條件式最終只看成立或不成立，而 JavaScript 會先把值轉成布林。記住這六個 假值 就夠了：

// 以下都不成立
if (false) {}
if (0) {}
if ('') {}
if (null) {}
if (undefined) {}
if (NaN) {}

注意

空物件 {} 與空陣列 [] 都是 真值，條件會成立。要判斷陣列有沒有內容，請看 length。

常見問題

什麼是流程控制？

流程控制是用來改變程式執行路徑的語法。程式預設由上往下執行，加上條件判斷或錯誤捕捉後，就能依當下狀況決定要執行哪一段程式。

條件判斷與 switch 該選哪一個？

判斷範圍或多個複合條件用 if；針對同一個值比對多個固定選項，例如：狀態代碼或選單值，用 switch 會更好讀。

try...catch 也算流程控制嗎？

算。它改變的是出錯時的執行路徑：程式在 try 區塊拋出例外後不會直接中斷，而是跳進 catch 區塊繼續處理。

條件式裡什麼值會被當成成立？

除了 false、0、空字串、null、undefined 與 NaN 這幾個假值之外，其餘都會被當成成立，包含空物件與空陣列。

流程控制與迴圈是同一件事嗎？

迴圈也屬於流程控制的一種，它處理的是重複執行；本文這幾種處理的是分支與例外。兩者常搭配使用。

延伸閱讀

條件switchtry...catchJavaScript 的語法構成