JavaScript - 選擇結構：Switch Case - 入門指南

嘿，未來的編程超級巨星！準備好學習 JavaScript 最酷的決策工具之一了嗎？請繫好安全帶，因為我們即將深入 Switch Case 說明的奇妙世界！

Switch Case 是什麼？

在我們深入了解之前，讓我們從一個簡單的比喻開始。想像你在一個冰淇淋店，並且需要選擇一種口味。你可以使用一堆 "if-else" 語句來決定，但那會像問服務員："是香草口味嗎？不是？是巧克力口味？不是？是草莓口味？" 這樣反覆問。難道直接說："這是什麼口味？" 然後根據回答來選擇不是更容易嗎？這正是 Switch Case 所做的！

流程圖

為了直觀地了解 Switch Case 如何工作，我們來看看一個流程圖：

[開始]
|
v
[檢查表達式]
|
______|_______
|      |       |
v      v       v
[案例 1][案例 2][案例 3]...
|      |       |
v      v       v
[動作 1][動作 2][動作 3]...
|      |       |
|______|_______|
|
v
[默認]
|
v
[結束]

這個流程圖展示了如何評估一個表達式，然後執行相應的案例區塊。如果沒有找到匹配的案例，它會執行默認區塊（如果提供）。

語法

現在，讓我們分解一下 Switch Case 語句的語法：

switch(expression) {
case value1:
// 要執行的代碼
break;
case value2:
// 要執行的代碼
break;
case value3:
// 要執行的代碼
break;
...
default:
// 如果沒有匹配的案例則要執行的代碼
}

以下是每部分的意思：

• switch(expression): 這裡我們放入我們想要檢查的值。
• case value: 這些是表達式的可能匹配值。
• // 要執行的代碼: 如果案例匹配，則發生的事情。
• break: 這個關鍵字告訴 JavaScript 在執行匹配的案例後退出 switch 區塊。
• default: 這就像 if-else 語句中的 "else"。如果沒有案例匹配，則執行。

範例

讓我們來看看一些範例，以觀察 Switch Case 在實際操作中的情況！

範例 1：星期

let day = 3;
let dayName;

switch (day) {
case 1:
dayName = "星期一";
break;
case 2:
dayName = "星期二";
break;
case 3:
dayName = "星期三";
break;
case 4:
dayName = "星期四";
break;
case 5:
dayName = "星期五";
break;
case 6:
dayName = "星期六";
break;
case 7:
dayName = "星期日";
break;
default:
dayName = "無效的日期";
}

console.log(dayName); // 輸出：星期三

在這個範例中，我們使用 Switch Case 將日期數字轉換為其對應的名稱。這是發生了什麼：

1. 我們將 day 設為 3。
2. switch 語句檢查 day 的值。
3. 它在 case 3 中找到一個匹配。
4. 它將 dayName 設為 "星期三"。
5. break 語句退出 switch 區塊。
6. 最後，我們將 dayName 輸出到控制台。

範例 2：評分系統

讓我們創建一個簡單的評分系統：

let grade = 'B';
let message;

switch(grade) {
case 'A':
message = "優秀的表現！";
break;
case 'B':
message = "很好的工作！";
break;
case 'C':
message = "良好的努力！";
break;
case 'D':
message = "你需要更加努力學習。";
break;
case 'F':
message = "請課後找我。";
break;
default:
message = "無效的評分";
}

console.log(message); // 輸出：很好的工作！

在這個範例中：

1. 我們將 grade 設為 'B'。
2. switch 語句檢查 grade 的值。
3. 它在 case 'B' 中找到一個匹配。
4. 它將 message 設為 "很好的工作！"。
5. break 語句退出 switch 區塊。
6. 我們將 message 輸出到控制台。

範例 3：多個案例

有時候，你可能希望不同的案例有相同的結果。以下是如何做到這一點：

let fruit = "apple";
let category;

switch(fruit) {
case "apple":
case "pear":
case "banana":
category = "常見水果";
break;
case "mango":
case "papaya":
category = "熱帶水果";
break;
default:
category = "未知水果";
}

console.log(category); // 輸出：常見水果

在這個範例中：

1. 我們將 fruit 設為 "apple"。
2. switch 語句檢查 fruit 的值。
3. 它在第一個 case "apple" 中找到一個匹配。
4. 由於沒有 break 語句，它會繼續執行到下一行。
5. 它將 category 設為 "常見水果"。
6. break 語句然後退出 switch 區塊。

Switch Case 方法

以下是一個 Switch Case 相關方法和其描述的表格：

方法	描述
switch	開始一個 switch 語句
case	在 switch 語句中定義一個案例
break	退出 switch 區塊
default	定義如果沒有其他案例匹配時的默認案例

記住，Switch Case 是關於讓你的代碼在有多個條件要檢查時更加易讀和高效。它就像一個交通控制器，根據特定的值將你的代碼指向正確的位置。

所以，這就是 Switch Case！現在你已經掌握了 Switch Case 的力量。記住，熟能生巧，所以嘗試創建你自己的 Switch Case 語句。也許可以創造一個有趣的遊戲，不同的選擇會導致不同的結果。可能性是無限的！

快樂編程，願 Switch 總是與你同在！??

Credits: Image by storyset