簡介
條件陳述式是任何程式語言中最重要的控制流程之一。我們使用它們來根據某些條件決定執行的行為。在 Javascript 中，條件區塊可以使用 if, else if, else 以及 switch 陳述式來構建。
The switch 陳述式透過針對運算式的某些可能結果進行決策，使控制流程易於閱讀。根據匹配的使用案例，可以執行一個或多個程式碼區塊。 switch 控制類似於 else if 陳述式。然而， switch 在語法上更具可讀性。它也非常適合有多個可能結果的場景。
在本教學中，我們將專注於 switch 陳述式在 Javascript 中的應用，並實作它來構建複雜的控制結構。我們還將學習如何使用 break , case 以及 default 陳述式在 switch 區塊中來引導控制流程.
使用 Switch 陳述式
The switch 陳述式的工作原理是將變數的值與可能的運算式進行比較。然後，它執行與結果匹配的程式碼區塊。 switch 陳述式與 if 陳述式沒有什麼不同。簡而言之，switch 陳述式的語法寫作：
|
1 2 |
switch() { } |
以下是 switch 陳述式的範例。它有兩個 case 或兩個可能的結果，以及一個由 default 關鍵字指定的備用選項。當執行結束或找不到匹配的 case 時，會執行此備用選項：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
switch (expression) { case x: // 當運算式匹配 case x 時執行此程式碼區塊 break; case y: // 當運算式匹配 case y 時執行此程式碼區塊 break; default: // 預設區塊 } |
上述程式碼的執行方式如下：
-
首先，評估運算式。
-
接下來，將運算式的結果與 case x 進行匹配。如果值匹配，則執行 case x 下的程式碼區塊。
-
如果運算式與 case x 不匹配，則與 case y 進行匹配。如果找到匹配，則執行 case y 程式碼。
-
最後，如果 case x 和 case y 都不匹配，則執行 default 程式碼，且控制權移出 switch 區塊。
實際範例
為了理解 switch 陳述式，讓我們來看一個實際範例。我們將提取目前日期的星期幾數值，方法是使用 getDay() 方法，該方法屬於 Javascript 的 Date 物件。這個值是一個數字， 代表星期日，一直到 6 代表星期六。我們將針對這些值進行評估，以確定今天是星期幾：
|
1 |
const day = new Date().getDay(); |
接下來，我們將把這個值傳遞給 switch 陳述式。 switch 陳述式將從上到下執行，將其與各個 case 進行匹配，以確定今天是星期幾。一旦找到匹配的 case， break 指令將停止 switch 區塊繼續評估陳述式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// 將當前星期幾設置為變數，0 代表星期日，6 代表星期六 const day = new Date().getDay(); switch (day) { case 0: console.log("今天是星期日"); break; case 1: console.log("今天是星期一！"); break; case 2: console.log("今天是星期二。"); break; case 3: console.log("已經是星期三了！"); break; case 4: console.log("今天是星期四"); break; case 5: console.log("星期五快樂！"); break; case 6: console.log("今天是星期六！"); break; default: console.log("沒有匹配的條件") } |
根據從 getDate() 方法返回的值，它將從最上方開始，逐一與各個 case 進行比對。輸出結果會根據您執行程式碼的日期而有所不同。設置 default 程式碼區塊是為了在沒有匹配到任何 case 時處理這種情況。然而，在此程式碼中，由於一週的天數是有限的，因此永遠不會呼叫 default。
The break 語句可確保一旦匹配到 case，就不會再匹配其他 case，且控制權會跳出 switch 語句。這使程式更高效、更快速。
在 Switch 中測試範圍
到目前為止，我們一直在看非常簡單的使用案例。但有時可能需要測試一個範圍的值，而不是單一的值。我們可以透過將運算式設置為 true 並在每個 case 語句中進行操作。
讓我們透過一個範例來演示這個使用案例。我們將取得一個分數，然後使用以下分類將其轉換為成績：
-
90 分及以上為 A
-
80 到 89 分為 B
-
70 到 79 分為 C
-
60 到 69 分為 D
-
59 分及以下為 F
我們將把這些語句寫成 switch 語句。以下是相關程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// 學生分數 const grade = 87; switch (true) { // 如果分數大於或等於 90 case grade >= 90: console.log("A"); break; // 如果分數大於或等於 80 case grade >= 80: console.log("B"); break; // 如果分數大於或等於 70 case grade >= 70: console.log("C"); break; // 如果分數大於或等於 60 case grade >= 60: console.log("D"); break; // 59 分及以下為不及格 default: console.log("F"); } |
與上述程式碼範例不同，這裡我們將括號中的運算式設定為 true。因此，無論哪一個 case 語句與 true 值相符，它都會被執行。就像 else if 語句一樣，第一個與指定值相符的語句將會被執行。這裡的輸出將會是 B，儘管事實上連 C 和 D 也符合該運算式。
多個 Case
如果您希望多個 case 共用同一個程式碼區塊，這也是可行的。這類似於 或 條件在 if 語句中。在這種情況下，我們可以為每個程式碼區塊指定多個 case。
為了說明這個概念，我們將提供一個以一年中月份為例的範例。我們將把這些月份分類為一年的四季。首先，我們將使用新的 Date() 方法來找出對應目前月份的數字，並將其套用到 month 變數。 Date().getMonth() 方法會傳回一個介於 0 到 11 之間的數字，其中 0 代表一月，而 11 代表十二月。
我們將使用以下規格進行分類：
-
冬季：一月、二月和三月
-
春季：四月、五月和六月
-
夏季：七月、八月和九月
-
秋季：十月、十一月和十二月
程式碼看起來會像這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const month = new Date().getMonth(); switch (month) { // 一月、二月、三月 case 0: case 1: case 2: console.log("Winter"); break; // 四月、五月、六月 case 3: case 4: case 5: console.log("Spring"); break; // 七月、八月、九月 case 6: case 7: case 8: console.log("Summer"); break; // 十月、十一月、十二月 case 9: case 10: case 11: console.log("Autumn"); break; default: console.log("Something went wrong."); } |
執行上述程式碼時，系統會根據月份在主控台（console）中指出季節的名稱。
結論
在本教學中，我們示範了如何使用 switch 語句於 JavaScript 應用程式中。我們還將 switch 語句套用到範圍和多個 case，並搭配了 default 關鍵字。如果您想了解更多關於 JavaScript 的資訊，可以參考以下教學：
祝您編寫程式愉快！
留言
目前尚無留言。成為第一個留言的人吧。