【JavaScript-Day 13】告别冗长if-else：精通switch语句，让代码清爽高效！

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

Python系列文章目录

PyTorch系列文章目录

机器学习系列文章目录

深度学习系列文章目录

Java系列文章目录

JavaScript系列文章目录

01-【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
02-【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 ＜script＞ 标签的 Hello World 实践
03-【JavaScript-Day 3】掌握JS语法规则：语句、分号、注释与大小写敏感详解
04-【JavaScript-Day 4】var 完全指南：掌握变量声明、作用域及提升
05-【JavaScript-Day 5】告别 var 陷阱：深入理解 let 和 const 的妙用
06-【JavaScript-Day 6】从零到精通：JavaScript 原始类型 String, Number, Boolean, Null, Undefined, Symbol, BigInt 详解
07-【JavaScript-Day 7】全面解析 Number 与 String：JS 数据核心操作指南
08-【JavaScript-Day 8】告别混淆：一文彻底搞懂 JavaScript 的 Boolean、null 和 undefined
09-【JavaScript-Day 9】从基础到进阶：掌握 JavaScript 核心运算符之算术与赋值篇
10-【JavaScript-Day 10】掌握代码决策核心：详解比较、逻辑与三元运算符
11-【JavaScript-Day 11】避坑指南！深入理解JavaScript隐式和显式类型转换
12-【JavaScript-Day 12】掌握程序流程：深入解析 if…else 条件语句
13-【JavaScript-Day 13】告别冗长if-else：精通switch语句，让代码清爽高效！

---

---

前言

在JavaScript编程中，我们经常需要根据不同的条件执行不同的代码块。在前一篇文章中，我们学习了 if...else if...else 语句，它能够很好地处理多重条件判断。然而，当我们需要针对一个表达式的多个可能值进行选择时，if...else if...else 结构可能会显得有些冗长和不够直观。这时，JavaScript 提供了另一种更为优雅和清晰的条件语句——switch 语句。本文将带你深入理解 switch 语句的结构、工作原理、与 if...else if 的比较，以及在实际开发中的应用和常见注意事项，助你编写出更易读、更高效的代码。

一、初识 switch 语句

switch 语句提供了一种多路分支选择的机制。它计算一个表达式的值，然后将该值与一系列 case 子句中的值进行比较。如果找到匹配项，则执行与该 case 关联的代码块。

1.1 switch 语句的基本结构

switch 语句的基本语法结构如下：

switch (expression) {
  case value1:
    // 当 expression 的结果等于 value1 时执行的代码
    break; // 可选，但通常是必需的
  case value2:
    // 当 expression 的结果等于 value2 时执行的代码
    break;
  // ... 可以有任意数量的 case 子句
  default: // 可选
    // 当 expression 的结果与所有 case 都不匹配时执行的代码
}

让我们来解析一下这个结构中的关键部分：

1.1.1 expression（表达式）

switch 关键字后面括号中的 expression 是一个表达式，它会被首先计算。这个表达式的结果将用于与后续的每个 case 子句指定的值进行比较。它可以是一个变量、一个函数调用、一个算术表达式等任何能够产生一个值的 JavaScript 表达式。

1.1.2 case valueN（分支条件）

每个 case 关键字后面跟着一个 valueN。switch 语句会将 expression 的计算结果与每个 case 的 valueN进行**严格相等（===）**比较。这意味着不仅值要相等，类型也必须相同。

例如，如果 expression 的结果是数字 1，那么它只会匹配 case 1:，而不会匹配 case '1':（字符串’1’）。

1.1.3 break 语句的重要性

break 语句在 switch 结构中扮演着至关重要的角色。当 expression 的值与某个 case 的值匹配成功后，相应的代码块会被执行。如果在这个代码块的末尾遇到了 break 语句，那么整个 switch 语句会立即终止执行，程序将跳出 switch 代码块，继续执行 switch 语句之后的代码。

如果省略了 break 语句，会出现什么情况呢？ 这就是所谓的“穿透”（fall-through）现象。程序会继续执行下一个 case 子句中的代码，无论下一个 case 的值是否与 expression 匹配，直到遇到一个 break 语句或者 switch 语句的末尾。这种特性有时可以巧妙地用于处理多个条件执行相同代码块的情况，但大多数情况下，忘记 break 会导致难以察觉的逻辑错误。

1.1.4 default 子句（默认情况）

default 子句是可选的。如果 expression 的计算结果与所有 case 子句中的值都不匹配，那么就会执行 default 子句中的代码块。可以把 default 子句看作是 if...else if...else 结构中最后的 else 部分，用于处理所有未明确指定的情况。

default 子句不一定非要放在最后，但通常约定俗成地将其置于所有 case 之后，以增强代码的可读性。如果 default 子句不在末尾，那么在其执行完毕后，如果没有 break，它也会发生穿透，执行后续的 case（如果存在的话）。

1.2 一个简单的 switch 示例

让我们来看一个根据数字判断星期几的简单例子：

let dayNumber = 3;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  case 3:
    dayName = "星期三"; // expression (3) === value (3) -> 匹配成功
    break;             // 执行 break，跳出 switch
  case 4:
    dayName = "星期四";
    break;
  case 5:
    dayName = "星期五";
    break;
  case 6:
    dayName = "星期六";
    break;
  case 7:
    dayName = "星期日";
    break;
  default:
    dayName = "无效的数字";
}

console.log(dayName); // 输出: 星期三

在这个例子中：

1. switch 表达式是 dayNumber，其值为 3。
2. 程序会依次将 3 与 case 1、case 2 进行比较，均不匹配。
3. 当比较到 case 3: 时，3 === 3 为 true，匹配成功。
4. 执行 dayName = "星期三";。
5. 遇到 break; 语句，switch 结构执行完毕。
6. console.log(dayName); 输出 “星期三”。

二、switch 语句的工作原理

理解 switch 语句的内部工作流程对于正确使用它至关重要。

2.1 执行流程图解

我们可以使用流程图来更直观地展示 switch 语句的执行流程：

graph TD
    A[开始] --> B{计算 switch(expression) 的值};
    B --> C1{值 === case value1?};
    C1 -- 是 --> D1[执行 case 1 的代码块];
    D1 --> E1{遇到 break?};
    E1 -- 是 --> F[结束 switch];
    E1 -- 否 --> C2{值 === case value2?};

    C1 -- 否 --> C2;
    C2 -- 是 --> D2[执行 case 2 的代码块];
    D2 --> E2{遇到 break?};
    E2 -- 是 --> F;
    E2 -- 否 --> C3[...其他 case];

    C3 -- 否 --> CN{值 === case valueN?};
    CN -- 是 --> DN[执行 case N 的代码块];
    DN --> EN{遇到 break?};
    EN -- 是 --> F;
    EN -- 否 --> G{存在 default?};

    CN -- 否 --> G;
    G -- 是 --> H[执行 default 的代码块];
    H --> F;
    G -- 否 --> F;
    F --> I[继续执行后续代码];

流程说明:

1. 计算表达式: 首先，switch 后括号内的 expression 被求值。
2. 顺序比较: 得到的值会从上到下与每个 case 子句的 value 进行严格相等 (===) 比较。
3. 执行匹配项:
   • 如果找到第一个匹配的 case，则执行该 case 对应的代码块。
   • break 的作用: 如果该代码块末尾有 break，则 switch 语句立即终止。
   • 穿透行为: 如果没有 break，执行流会“穿透”到下一个 case，并执行其代码块，此时不再进行值匹配，直到遇到 break 或 switch 结束。
4. default 处理: 如果遍历完所有 case 都没有找到匹配项，则会查找 default 子句：
   • 如果存在 default 子句，则执行其代码块。
   • 如果 default 子句后没有 break (且其不是最后一个子句)，也可能发生穿透到后续 case (尽管这种情况设计上较少见且不推荐)。
5. 结束: 如果没有匹配的 case 且没有 default 子句，或者执行了 break，或者执行到了 switch 语句的末尾，则 switch 语句结束。

2.2 深入理解“穿透”（Fall-through）行为

前面我们提到了，如果 case 代码块后面没有 break 语句，程序会继续执行后续的 case 或 default 代码块，这就是“穿透”现象。

2.2.1 有意为之的穿透：合并处理逻辑

在某些特定场景下，我们可能希望多个不同的 case 值执行相同的或部分相同的代码逻辑。这时，可以利用穿透特性来简化代码。

示例：根据月份判断季节（简化版，不考虑具体日期）

let month = 4;
let season;

switch (month) {
  case 12:
  case 1:
  case 2:
    season = "冬季";
    break;
  case 3:
  case 4: // month (4) === value (4) -> 匹配成功
  case 5: // 由于 case 4 后面没有 break，会穿透到这里
    season = "春季"; // season 被赋值为 "春季"
    break;             // 遇到 break，跳出 switch
  case 6:
  case 7:
  case 8:
    season = "夏季";
    break;
  case 9:
  case 10:
  case 11:
    season = "秋季";
    break;
  default:
    season = "无效的月份";
}

console.log(`月份 ${month} 属于 ${season}`); // 输出: 月份 4 属于 春季

在这个例子中：

• 当 month 是 12、1 或 2 时，都会执行 season = "冬季";。例如，如果 month 是 12，它匹配 case 12:，然后由于没有 break，会穿透到 case 1:，再穿透到 case 2:，最终执行 season = "冬季";，然后遇到 break 退出。
• 当 month 是 3、4 或 5 时，都会执行 season = "春季";。

这种方式比写成多个 if (month === 3 || month === 4 || month === 5) 在某些情况下更清晰。

2.2.2 无意穿透导致的常见错误

大部分情况下，忘记写 break 是一个常见的编程错误，它会导致意想不到的逻辑和结果。

示例：错误的奖励发放

let userLevel = "silver";
let rewards = [];

switch (userLevel) {
  case "gold":
    rewards.push("黄金礼包");
    // 故意不写 break，gold 用户也应获得 silver 和 bronze 的奖励
  case "silver":
    rewards.push("白银礼包"); // userLevel ("silver") === "silver" -> 匹配
    // 忘记写 break!
  case "bronze":
    rewards.push("青铜礼包"); // 由于上一个 case 穿透，这里也会执行
    break;
  default:
    rewards.push("参与奖");
}

console.log(rewards); // 预期: ["白银礼包", "青铜礼包"] 或仅 ["白银礼包"] (如果silver不应得bronze)
                      // 实际 (如果silver忘记break): ["白银礼包", "青铜礼包"]
                      // 如果是想让silver只得白银和青铜，那么是正确的穿透。
                      // 如果只想让silver得白银，那么就忘记了break。

// 假设我们只想让 silver 用户获得 "白银礼包"
// 正确的写法应该是：
let userLevelCorrect = "silver";
let rewardsCorrect = [];
switch (userLevelCorrect) {
  case "gold":
    rewardsCorrect.push("黄金礼包");
    break;
  case "silver":
    rewardsCorrect.push("白银礼包"); // 匹配
    break;                         // 添加 break!
  case "bronze":
    rewardsCorrect.push("青铜礼包");
    break;
  default:
    rewardsCorrect.push("参与奖");
}
console.log(rewardsCorrect); // 输出: ["白银礼包"]

因此，除非你明确需要利用穿透特性，否则请务必在每个 case 代码块（以及 default 代码块，如果它不是最后一个子句）的末尾加上 break 语句。

三、switch 与 if...else if...else 的抉择

switch 语句和 if...else if...else 语句都可以用于实现多条件分支逻辑。那么，我们应该如何选择呢？

3.1 比较维度

我们可以从以下几个方面对它们进行比较：

3.1.1 可读性与清晰度

• switch 的优势: 当你需要根据一个单一变量或表达式的多个离散值进行判断时，switch 语句通常结构更清晰，意图更明确。每个 case 直接对应一个可能的值，一目了然。

  // 使用 switch 判断状态码
  switch (statusCode) {
    case 200:
      console.log("成功");
      break;
    case 400:
      console.log("错误请求");
      break;
    case 404:
      console.log("未找到");
      break;
    case 500:
      console.log("服务器错误");
      break;
    default:
      console.log("未知状态");
  }
  

• if...else if 的优势: 当条件判断涉及复杂的逻辑表达式、范围比较或者多个不同变量时，if...else if 更加灵活和强大。

  // 使用 if...else if 判断分数等级
  let score = 85;
  let grade;
  if (score >= 90 && score <= 100) {
    grade = "A";
  } else if (score >= 80 && score < 90) {
    grade = "B";
  } else if (score >= 70 && score < 80) {
    grade = "C";
  } else if (score >= 60 && score < 70) {
    grade = "D";
  } else if (score >= 0 && score < 60) {
    grade = "F";
  } else {
    grade = "无效分数";
  }
  console.log(`你的等级是: ${grade}`); // 输出: 你的等级是: B
  

  这种范围判断和复杂的逻辑与 (&&)，switch 语句难以直接实现（除非使用一些技巧，但会降低可读性）。

3.1.2 性能考量（理论上）

在某些 JavaScript 引擎中，当 case 的数量较多且值是简单的常量（如数字或字符串）时，switch 语句可能会被优化，其查找匹配 case 的速度可能比等效的 if...else if 链更快。这是因为引擎有时可以为 switch 构建一个“跳转表”（jump table）或类似的优化结构，从而实现近乎 $O(1)$ 的查找时间。而 if...else if 链则通常需要逐个评估条件，平均时间复杂度为 $O(N)$，其中 $N$ 是条件的数量。

然而，需要强调的是：

1. 现代引擎优化: 现代 JavaScript 引擎非常智能，它们也会对 if...else if 结构进行优化。
2. 微优化: 对于大多数应用场景，两者之间的性能差异微乎其微，不应作为首要的考虑因素。代码的可读性和可维护性通常更为重要。
3. 具体场景: 性能差异取决于具体的 case 值类型、数量以及 JavaScript 引擎的实现。

除非在性能极其敏感的核心代码段，且有大量（例如几十个或更多）的 case 分支，否则不建议过度关注此点。

3.1.3 条件判断的类型

• switch: 强制使用严格相等 (===) 进行比较。这意味着它不仅比较值，还比较类型。
• if...else if: 可以在条件中运用各种比较运算符（==, ===, !=, !==, <, >, <=, >=）和逻辑运算符（&&, ||, !），提供了更大的灵活性。

3.2 何时选择 switch？

• 当你需要基于单个变量或表达式的多个特定、离散的值来执行不同的操作时。
• 当分支条件都是简单的等值判断时。
• 当使用 switch 能使代码的意图更清晰、结构更扁平时（相对于冗长的 if...else if 链）。
• 当你需要利用 case 的穿透特性来为多个值执行共同逻辑时（需谨慎使用并加注释）。

适用场景示例：

• 处理键盘按键码。
• 根据错误代码执行不同的错误处理逻辑。
• 实现一个简单的状态机。
• 根据用户选择的菜单项执行不同功能。

3.3 何时选择 if...else if...else？

• 当你需要基于范围进行判断时（例如，score >= 90）。
• 当每个分支的判断条件涉及不同的变量或复杂的逻辑表达式时。
• 当需要使用非严格相等的比较或多种不同的比较运算符时。
• 当分支数量较少（例如2-3个）时，if...else 可能更为简洁。

适用场景示例：

• 根据用户年龄判断所属年龄段。
• 校验表单输入的多个字段，每个字段有不同的校验规则。
• 复杂的业务规则判断。

四、switch 语句的实际应用案例

下面通过几个具体的代码示例，展示 switch 语句在实际开发中的应用。

4.1 处理用户命令输入

假设我们正在开发一个简单的命令行工具，用户可以输入不同的命令执行操作。

function processCommand(command) {
  let result = "";
  switch (command.toLowerCase()) { // 将命令转换为小写以进行不区分大小写的比较
    case "create":
      result = "正在执行创建操作...";
      // 模拟创建逻辑
      break;
    case "delete":
      result = "正在执行删除操作...";
      // 模拟删除逻辑
      break;
    case "list":
      result = "正在列出项目...";
      // 模拟列出逻辑
      break;
    case "help":
      result = "可用命令: create, delete, list, help";
      break;
    default:
      result = `未知命令: '${command}'. 请输入 'help' 查看可用命令。`;
  }
  return result;
}

console.log(processCommand("CREATE")); // 输出: 正在执行创建操作...
console.log(processCommand("Update")); // 输出: 未知命令: 'Update'. 请输入 'help' 查看可用命令。
console.log(processCommand("help"));   // 输出: 可用命令: create, delete, list, help

代码解释:

• command.toLowerCase() 确保了比较是不区分大小写的。
• 不同的命令字符串对应不同的 case。
• default 用于处理用户输入的未知命令。

4.2 根据状态码显示消息

在Web开发中，我们经常需要根据HTTP响应的状态码来给用户不同的提示。

function getHttpStatusMessage(statusCode) {
  let message;
  switch (statusCode) {
    case 200:
    case 201: // 多个 case 可以共享一个处理逻辑（利用穿透，但这里是分别break）
    case 204: // 或者可以写成 if (statusCode === 200 || statusCode === 201 || ...)
      message = "请求成功！";
      break;
    case 400:
      message = "客户端请求错误，请检查您的输入。";
      break;
    case 401:
      message = "未授权，请先登录。";
      break;
    case 403:
      message = "禁止访问。";
      break;
    case 404:
      message = "请求的资源未找到。";
      break;
    case 500:
    case 502:
    case 503:
      message = "服务器内部错误，请稍后再试。";
      break;
    default:
      if (statusCode >= 200 && statusCode < 300) {
        message = "请求成功（未知具体成功状态）。";
      } else if (statusCode >= 400 && statusCode < 500) {
        message = "客户端错误（未知具体错误状态）。";
      } else if (statusCode >= 500 && statusCode < 600) {
        message = "服务器错误（未知具体错误状态）。";
      } else {
        message = "未知的状态码。";
      }
  }
  return `状态 ${statusCode}: ${message}`;
}

console.log(getHttpStatusMessage(200)); // 输出: 状态 200: 请求成功！
console.log(getHttpStatusMessage(404)); // 输出: 状态 404: 请求的资源未找到。
console.log(getHttpStatusMessage(503)); // 输出: 状态 503: 服务器内部错误，请稍后再试。
console.log(getHttpStatusMessage(302)); // 输出: 状态 302: 未知的状态码。 (因为没在case中，且不满足default中的if)
// 改进：default中可以更细致地处理范围，或者直接提示未知

代码解释:

• 这里我们将相似的状态码（例如500、502、503都表示服务器问题）归类到一起处理，可以利用穿透（如果后续代码块相同）或者像示例中那样为每个 case 单独写 break。
• default 子句可以结合 if 语句处理未在 case 中明确列出的状态码范围，或者提供一个通用消息。

4.3 实现简单的计算器功能

function simpleCalculator(num1, num2, operator) {
  let result;
  switch (operator) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      if (num2 === 0) {
        result = "错误：除数不能为零！";
      } else {
        result = num1 / num2;
      }
      break;
    default:
      result = "不支持的运算符。";
  }
  return result;
}

console.log(`10 + 5 = ${simpleCalculator(10, 5, '+')}`);   // 输出: 10 + 5 = 15
console.log(`10 - 5 = ${simpleCalculator(10, 5, '-')}`);   // 输出: 10 - 5 = 5
console.log(`10 * 5 = ${simpleCalculator(10, 5, '*')}`);   // 输出: 10 * 5 = 50
console.log(`10 / 5 = ${simpleCalculator(10, 5, '/')}`);   // 输出: 10 / 5 = 2
console.log(`10 / 0 = ${simpleCalculator(10, 0, '/')}`);   // 输出: 10 / 0 = 错误：除数不能为零！
console.log(`10 % 5 = ${simpleCalculator(10, 5, '%')}`);   // 输出: 10 % 5 = 不支持的运算符。

代码解释:

• switch 语句根据 operator 字符来选择执行哪种算术运算。
• 在 case '/': 中，我们还加入了一个 if 判断来处理除数为零的特殊情况。

五、常见陷阱与最佳实践

在使用 switch 语句时，有一些常见的“坑”点需要注意，遵循一些最佳实践可以帮助我们写出更健壮、更易维护的代码。

5.1 最大的陷阱：忘记 break

这是 switch 语句中最常见也最容易导致 bug 的地方。如前所述，省略 break 会导致“穿透”行为，程序会继续执行后续的 case 代码块，这往往不是期望的结果。

最佳实践：

• 总是添加 break：除非你明确需要利用穿透特性，否则在每个 case（和 default，如果它不是最后一个子句）的末尾都加上 break。
• 注释穿透行为：如果你确实有意使用穿透，请务必在代码中添加清晰的注释说明原因，例如 // Fall-through intended。

5.2 严格比较 === 的影响

switch 语句在比较 expression 的结果和 case 的值时，使用的是严格相等运算符 ===。这意味着它不会进行类型转换。

示例：数字与字符串数字的比较

let value = "1"; // value 是字符串 "1"

switch (value) {
  case 1: // case 的值是数字 1
    console.log("Value is number 1");
    break;
  case "1": // case 的值是字符串 "1"
    console.log("Value is string '1'"); // 匹配这里
    break;
  default:
    console.log("Value not matched.");
}
// 输出: Value is string '1'

let numericValue = 1;
switch (numericValue) { // numericValue 是数字 1
  case "1":
    console.log("This will not match.");
    break;
  default: // 会执行 default (如果没有其他匹配的数字 case)
    console.log("No string '1' case, and type is different for numeric 1.");
}

最佳实践：

• 确保类型一致：在 switch 表达式和 case 值之间保持数据类型的一致性。
• 显式转换：如果需要比较不同类型的值，应在 switch 表达式中或 case 值定义之前进行显式的类型转换（例如使用 parseInt(), String() 等），但这通常表明 if...else if 可能更合适。

5.3 default 子句的使用

虽然 default 子句是可选的，但通常推荐使用它。

最佳实践：

• 总是包含 default：即使你认为已经覆盖了所有可能的 case，也最好包含一个 default 子句。这可以用于捕获意外的值，或者作为一种防御性编程措施，提示发生了未预期的情况。

  switch (status) {
    case 'active':
      // ...
      break;
    case 'inactive':
      // ...
      break;
    default:
      console.error(`Unexpected status value: ${status}`);
      // 或者进行一些默认处理
      break;
  }
  

• default 的位置：习惯上将 default 放在所有 case 的末尾。如果放在其他位置，记得在其后加上 break（如果不想它穿透到后续的 case）。

5.4 case 子句中的代码块

如果一个 case 分支需要执行多条语句，可以将这些语句自然地写在 case 和 break (或下一个 case) 之间。

有时为了代码的清晰性，或者当你在 case 内部使用 let 或 const 声明变量时，为了创建块级作用域，可以用花括号 {} 将 case 的代码块包起来。

示例：使用块级作用域

let action = "edit";
let itemId = 101;

switch (action) {
  case "view": { // 使用花括号创建块作用域
    let message = `Viewing item ${itemId}.`; // message 只在此 case 块内有效
    console.log(message);
    // ...其他 view 逻辑
    break;
  }
  case "edit": {
    let message = `Editing item ${itemId}.`; // 此处的 message 与上面 case 中的 message 不冲突
    console.log(message);
    // ...其他 edit 逻辑
    // let itemId = 202; // 错误，不能在同一作用域重复声明 itemId (如果外部已有)
                       // 但可以声明与外部同名的新变量，会遮蔽外部的
    let localId = itemId * 2; // 正确
    console.log(`Local ID for editing: ${localId}`);
    break;
  }
  default:
    console.log("Unknown action.");
}
// console.log(message); // 错误: message is not defined (因为它在 case 块作用域内)

最佳实践：

• 当 case 内部逻辑复杂或需要定义仅用于该 case 的变量（特别是使用 let 或 const）时，使用 {} 包裹代码块是一个好习惯，可以避免变量名冲突和意外的作用域问题。

5.5 case 值的类型

case 后面通常跟的是常量值（字面量或 const 声明的常量）。虽然 case 表达式本身可以是任何表达式，但它会在 switch 语句求值时被计算一次，并且其结果用于与 switch 表达式进行比较。更常见的是，case 后面直接使用字面量，如数字、字符串或布尔值。

注意：你不能在 case 后面使用变量，并期望它能动态匹配，除非该变量的值在 switch 语句执行前就已确定为一个常量，并且你确实想匹配那个特定的常量值。

const STATUS_ACTIVE = 'active';
const STATUS_INACTIVE = 'inactive';
let currentStatus = STATUS_ACTIVE;

switch (currentStatus) {
  case STATUS_ACTIVE: // 使用 const 常量是可以的
    console.log("User is active.");
    break;
  case STATUS_INACTIVE:
    console.log("User is inactive.");
    break;
  default:
    console.log("Unknown status.");
}

六、总结

switch 语句是 JavaScript 中一个强大且实用的多路条件分支工具，它为处理基于单个表达式的多个离散值判断提供了一种清晰、结构化的方式。

本文详细探讨了 switch 语句的以下核心内容：

1. 基本结构：理解了 switch (expression)、case value:、break; 和 default: 各个组成部分的作用。
2. 工作原理：深入分析了 switch 的执行流程，特别是严格相等 (===) 比较机制和 break 语句引发的“穿透”（fall-through）行为。
3. break 的重要性：强调了在绝大多数情况下，每个 case 后都应使用 break 来防止意外的穿透，除非有意利用该特性并加以注释。
4. switch vs. if...else if：比较了两者在可读性、理论性能（通常不作为主要考虑因素）和条件判断类型上的差异，并给出了各自的适用场景。switch 适用于单一表达式对多个离散值的精确匹配，而 if...else if 更灵活，能处理范围、复杂逻辑和不同变量的判断。
5. 实际应用案例：通过用户命令处理、HTTP状态码消息转换和简单计算器等示例，展示了 switch 在实际项目中的应用。
6. 常见陷阱与最佳实践：指出了忘记 break、严格比较带来的类型问题、default 子句的推荐用法以及 case 内使用块级作用域等注意事项，旨在帮助开发者编写更优良的 switch 代码。

掌握 switch 语句，并能根据具体场景恰当地选择它或 if...else if 结构，是提升 JavaScript 编程能力和代码质量的重要一步。希望本文能帮助你更深入地理解并熟练运用 switch 语句！

---