JScript Katana

精通 JavaScript Switch 陳述式：語法、使用情境與實作範例

JavaScript基礎與入門
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. 介紹：什麼是 switch 陳述式？

在 JavaScript 中，條件分支在控制程式流程方面扮演關鍵角色。在這些結構中，switch 陳述式 用作一種語法，能有效處理多個條件。 switch 陳述式 在您想要根據特定值執行不同程序時非常有用。例如，用於根據星期幾顯示不同訊息，或根據使用者輸入切換動作。

switch 陳述式的使用情境

switch 陳述式 在以下情境中特別有效：

  • 當您想要有效處理多個條件時：代替重複 if 陳述式，使用 switch 有助於簡化您的程式碼。
  • 當您想要為每個條件執行不同程序時：根據資料切換行為很有用。
  • 當您想要改善程式碼可讀性時：其結構清晰，有助於組織條件邏輯。

switch 的關鍵特徵

  • 基於值的分支：switch 陳述式檢查運算式評估結果是否符合特定值。
  • 使用 break 控制：break 陳述式停止執行，避免落入下一個 case。
  • 使用 default：定義當無 case 符合時的預設行為。

摘要

switch 陳述式 是一種有用的工具，能組織條件分支並改善 JavaScript 中的可讀性。在下一節中，我們將解釋其基本語法以及如何使用具體範例。

2. 基本語法與角色

在 JavaScript 中，switch 陳述式 是一種方便的控制結構，用於根據特定值分支邏輯。本節詳細解釋 基本語法與每個元素的角色。

基本語法

以下是 switch 陳述式 的基本結構。

switch (式) {
  case 値1:
    // 値1に一致した場合の処理
    break;
  case 値2:
    // 値2に一致した場合の処理
    break;
  default:
    // どの値にも一致しなかった場合の処理
}

以下是每個元素的解釋。

語法元素的詳細說明

  1. switch (expression)
  • expression 包含要比較的值或計算運算式。
  1. case value:
  • 每個 case 指定一個與運算式比較的值。
  1. break;
  • break 陳述式在執行符合的 case 後退出 switch。
  1. default:
  • 定義當無 case 符合時執行的處理。

實際範例

以下是根據星期幾顯示訊息的範例。

let day = "月曜日";

switch (day) {
  case "月曜日":
    console.log("週の始まりです。頑張りましょう！");
    break;
  case "金曜日":
    console.log("もうすぐ週末です。");
    break;
  default:
    console.log("通常の日です。");
}

摘要

switch 陳述式 提供簡單且易讀的條件分支。接下來，我們將介紹 「3. switch 的實際範例」 以探索更進階的使用。

3. switch 陳述式的實際範例

在這裡，我們透過具體範例—from 基本到進階—解釋 JavaScript 的 switch 陳述式，以幫助您了解其在實際程式設計中的使用方式。

基本條件分支

範例 1：根據星期幾顯示訊息

let day = "水曜日";

switch (day) {
  case "月曜日":
    console.log("今週も頑張りましょう！");
    break;
  case "水曜日":
    console.log("週の半ばです。あと少し！");
    break;
  case "金曜日":
    console.log("週末まであと1日！");
    break;
  default:
    console.log("リラックスできる日です。");
}

分組多個 Case

範例 2：區分工作日與週末

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

與 switch 結合函式

範例 3：使用者權限

function getUserPermission(role) {
  switch (role) {
    case "admin":
      return "すべての権限があります。";
    case "editor":
      return "編集権限があります。";
    case "viewer":
      return "閲覧のみ可能です。";
    default:
      return "権限がありません。";
  }
}

console.log(getUserPermission("editor"));

摘要

透過這些實作範例，你現在應該能更好地了解如何使用 switch 陳述式。接下來，我們將討論 「4. switch vs if – 該使用哪一個？」

4. switch vs if — 哪個該選？

switch 與 if 都能在 JavaScript 中處理條件分支，但使用情境不同。了解它們的差異有助於在各種情況下選擇最適合的方式。

基本差異

Featureswitchif
Type of conditionBest for comparing specific valuesBest for complex expressions or range checks
ReadabilityEasier to organize many conditionsSimple conditions can be short and clear
FlexibilityLimited to fixed-value comparisonsAllows complex logical comparisons
PerformanceSometimes faster than if in certain situationsFast and efficient when conditions are few

範例比較

範例 1：使用 switch

let color = "赤";

switch (color) {
  case "赤":
    console.log("ストップ！");
    break;
  case "黄":
    console.log("注意！");
    break;
  case "青":
    console.log("進んでください！");
    break;
  default:
    console.log("無効な色です。");
}

範例 2：使用 if

let score = 85;

if (score >= 90) {
  console.log("評価: A");
} else if (score >= 75) {
  console.log("評価: B");
} else if (score >= 50) {
  console.log("評価: C");
} else {
  console.log("評価: F");
}

小結

適當地在 switch 與 if 之間做選擇，能寫出更有效率的程式碼。接著，我們將討論 「5. 防止錯誤的技巧」。

5. 防止錯誤的技巧

JavaScript 的 switch 陳述式 使用方便，但若使用不當，可能會產生錯誤或預期之外的行為。本節說明避免錯誤的關鍵要點。

1. 忘記 break 會導致貫穿

範例：

let fruit = "リンゴ";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

結果：

リンゴが選ばれました。
バナナが選ばれました。

解決方案：

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
  default:
    console.log("その他のフルーツです。");
}

2. 別忘記 default

範例：

let command = "停止";

switch (command) {
  case "開始":
    console.log("システムを起動します。");
    break;
  case "終了":
    console.log("システムを終了します。");
    break;
}

解決方案：

default:
  console.log("無効なコマンドです。");

3. 注意型別不匹配

範例：

let value = 1;

switch (value) {
  case "1":
    console.log("文字列の1です。");
    break;
  case 1:
    console.log("数値の1です。");
    break;
  default:
    console.log("一致しません。");
}

小結

遵循這些技巧，你可以避免錯誤，撰寫高效且易於維護的程式碼。

6. switch 的進階技巧

JavaScript 的 switch 陳述式 不僅可用於基本分支，亦能應用於更彈性、進階的實作。

1. 多個 case 分組

範例：

let day = "土曜日";

switch (day) {
  case "月曜日":
  case "火曜日":
  case "水曜日":
  case "木曜日":
  case "金曜日":
    console.log("今日は平日です。");
    break;
  case "土曜日":
  case "日曜日":
    console.log("今日は週末です。");
    break;
  default:
    console.log("無効な曜日です。");
}

2. 巢狀 switch 陳述式

範例：

let menu = "ドリンク";
let subMenu = "コーヒー";

switch (menu) {
  case "フード":
    switch (subMenu) {
      case "ハンバーガー":
        console.log("ハンバーガーが選ばれました。");
        break;
      default:
        console.log("無効なフードメニューです。");
    }
    break;

  case "ドリンク":
    switch (subMenu) {
      case "コーヒー":
        console.log("コーヒーが選ばれました。");
        break;
      default:
        console.log("無効なドリンクメニューです。");
    }
    break;
}

小結

運用這些進階技巧，可更有效率地處理複雜的分支情況。

7. 常見問與答：問題與故障排除

許多開發者在使用 JavaScript 的 switch 陳述式 時會遇到類似的問題。以下列出常見問題與解決方案。

Q1: 若忘記寫 break 會發生什麼事？

範例：

let value = 2;

switch (value) {
  case 1:
    console.log("1が選択されました。");
  case 2:
    console.log("2が選択されました。");
  case 3:
    console.log("3が選択されました。");
}

結果：

2が選択されました。
3が選択されました。

解決方案：

break;

Q2: 必須寫 default 嗎？

範例：

let fruit = "パイナップル";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴが選ばれました。");
    break;
  case "バナナ":
    console.log("バナナが選ばれました。");
    break;
}

解決方案：

default:
  console.log("不明なフルーツです。");

Q3: switch 能比較範圍嗎？

範例：

let score = 85;

switch (true) {
  case score >= 90:
    console.log("評価: A");
    break;
  case score >= 75:
    console.log("評価: B");
    break;
  default:
    console.log("評価: F");
}

小結

使用本 FAQ 來處理錯誤，並加深對 switch 陳述式的理解。

8. 程式碼範例與練習題

本節提供 範例程式碼 與 練習題，讓你使用 switch 陳述式練習。試著完成它們，以深化你的理解。

1. 基本範例程式碼

範例 1：依月份判斷季節

let month = 3;

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("冬です。");
    break;
  case 3:
  case 4:
  case 5:
    console.log("春です。");
    break;
  case 6:
  case 7:
  case 8:
    console.log("夏です。");
    break;
  case 9:
  case 10:
  case 11:
    console.log("秋です。");
    break;
  default:
    console.log("無効な月です。");
}

範例 2：使用者權限

let role = "editor";

switch (role) {
  case "admin":
    console.log("すべての権限があります。");
    break;
  case "editor":
    console.log("編集権限があります。");
    break;
  case "viewer":
    console.log("閲覧権限のみあります。");
    break;
  default:
    console.log("権限がありません。");
}

2. 練習題

題目 1：平日／週末偵測器

撰寫一個程式，判斷給定的日期是平日還是週末。

題目 2：購物車計算

撰寫一個程式，根據商品類別與數量計算總金額。

題目 3：電話選單系統

撰寫一個程式，根據使用者輸入的數字顯示對應的選項。

小結

利用這些練習題加強你的 switch 陳述式技巧。

9. 小結與未來應用

本文全面說明了 JavaScript switch 陳述式，從基礎到進階技巧皆有涵蓋。以下為重點整理與未來進一步提升的方向。

1. 主要重點

  • 基本語法與特性： 使用 case、break 與 default 來撰寫清晰的條件邏輯。
  • 與 if 的比較： switch 適合固定值的判斷，if 則適用於複雜條件。
  • 錯誤防範： 使用 break、型別檢查與 default 以避免錯誤。
  • 進階技巧： 透過巢狀、映射與動態處理提升彈性設計。

2. 未來應用建議

1. 最佳化複雜條件邏輯

可結合多個表達式與函式，處理動態條件。

2. 使用映射實作動態處理

利用物件或 Map 進行高效且可擴充的資料管理。

const actions = {
  start: () => console.log("システムを起動します。"),
  stop: () => console.log("システムを停止します。"),
  restart: () => console.log("システムを再起動します。"),
};

let command = "restart";
(actions[command] || (() => console.log("無効なコマンドです。")))();

3. 套用於狀態管理系統

在應用開發中，可將 switch 與 Redux、Vuex 等狀態管理函式庫結合使用。

小結

switch 陳述式 是 JavaScript 條件邏輯中既簡單又強大的工具。透過了解其基礎與進階用法，你可以顯著提升程式碼的可讀性與可維護性。
將此文章作為進一步技能發展的基礎。

広告