一文熟练掌握JavaScript的switch用法

前言

JavaScript switch 语句是一种根据不同条件在代码中做出决策的方法。它比使用 if-else 语句更有条理、更简洁。switch 语句通过计算给定的表达式（可以是变量或值），并将其与几种可能的情况进行比较。如果表达式的值与其中一种情况匹配，则执行关联的代码块（一组指令）。如果未找到匹配项，则可以执行可选的默认情况作为后备，这意味着它会在其他情况都不适用时运行。

我们来看一个简单的例子：

switch (day) {
  case "Monday":
    console.log("工作日开始");
    break;
  case "Friday":
    console.log("工作日结束");
    break;
  default:
    console.log("常规日期");
}

通过掌握 switch 语句，我们可以编写更干净、更高效、组织更好的 JavaScript 代码，最终提高我们的整体编程技能。

switch 基础介绍

switch 语句以关键字 switch 开头，后跟括号中的表达式。该表达式与包含在 switch 块中的一系列 case 标签进行比较。每个 case 标签代表一个不同的值，当表达式与 case 标签的值匹配时，执行 case 后面的代码块。语句break通常用于在执行匹配的 case 后退出 switch 块，确保仅运行预期的代码块，并防止跳到下一个 case。同时还可以包含默认情况，以便在没有任何情况标签与表达式匹配时提供后备操作，从而确保对未知值的响应。

使用语法：

switch(expression) {
    case {value1}:
    // 要执行的代码
    break
    case {value2}:
    // 要执行的代码
    break 
    default: 
    // 默认情况
}

case

判断条件，case的条件相当于===，即全等条件下才成立。

default

当没有其他情况与提供的表达式匹配时，将执行 switch 语句中的默认情况。它可以作为处理意外或未知值的后备措施，确保即使没有匹配的情况也能提供响应。

break

break关键字用在 switch 语句中，一旦找到并执行匹配的 case 就退出 switch 块。它阻止代码继续执行剩余的情况，确保只生成正确的输出。

一个 case 在 switch 语句中不能有多个条件。要在一种情况下合并多个条件，可以在case中省略break，从而允许代码执行继续到下一个 case，直到遇到下一个break或到达 switch 块的末尾。当多个条件共享相同的输出或操作时，这可能很有用。

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("工作日");
    break;
  default:
    console.log("周末");
}

switch 与 if-else

当需要处理多个条件时，switch 语句是使用 if-else 语句的替代方法。虽然 if-else 语句适合检查一系列可以表示为 true 或 false 的条件，但 switch 语句在处理可以采用多个不同值的单个表达式时更有效。从本质上讲，当我们有多个相关条件需要管理时，switch 语句可以使我们的代码更干净、更有组织性并且更易于阅读。

例如，以下是一个 if-else 结构的例子：

if (color === "red") {
  console.log("The color is red");
} else if (color === "blue") {
  console.log("The color is blue");
} else if (color === "green") {
  console.log("The color is green");
} else {
  console.log("Unknown color");
}

使用switch语法：

switch (color) {
  case "red":
    console.log("The color is red");
    break;
  case "blue":
    console.log("The color is blue");
    break;
  case "green":
    console.log("The color is green");
    break;
  default:
    console.log("Unknown color");
}

在处理大量条件的情况下，switch 语句提供了一种更有组织性和可读性的方式来处理多个条件。在 switch 语句中，括号内的变量或值（在本例中为变量color）是需要计算的表达式。

什么时候使用switch

• 大量单变量条件：当需要处理大量条件时，switch 语句通常比 if-else 链更有组织性且更易于阅读。
• 单变量评估：如果我们的条件是基于具有多个不同值的单个变量或表达式，则 switch 语句可以提供比 if-else 模式更高效、更清晰的结构。
• 更快的代码执行速度：在某些情况下，JavaScript 引擎可以优化 switch 语句，与一系列 if-else 语句相比，可以实现更快的代码执行速度。
• 更容易维护： switch 语句可以使添加、删除或修改条件变得更加容易，因为每个条件在 switch 块中都是独立的。相反，当需要更改时，if-else 链可能需要更广泛的修改。
• 默认回退： switch 语句提供可选的默认情况，当其他情况都不与给定表达式匹配时可以执行该默认情况。此功能允许以一种干净的方式处理意外或未知值。

什么时候使用if-else

• 复杂条件：如果我们的条件涉及复杂逻辑、多个变量或关系和逻辑运算符，则 if-else 模式提供了更大的灵活性，并且比 switch 语句更适合这些情况。
• 基于范围的条件：当我们需要检查一系列非离散值或条件时，if-else 模式提供了更好的解决方案，因为 switch 语句是为比较离散值而设计的。
• 条件数量少：如果只有几个简单的条件需要检查，则使用 if-else 模式比 switch 语句更直接、更容易编写。
• 非常量： switch 语句需要 case 标签为常量值，这意味着它们不能是在运行时更改的表达式。如果我们需要判断非常量值的条件，则 if-else 模式是合适的选择。
• 判断true或false值：当我们需要检查值是真值还是假值时，If-else 模式适用。switch 语句不是为这种类型的评估而设计的，并且需要更详细的代码才能完成相同的结果。
• 提前退出条件：如果我们有提前退出条件，一旦满足特定条件就不需要进一步判断，则 if-else 模式可能会更有效。使用 switch 语句，即使发现早期匹配，也会判断所有情况（除非我们使用了break语句）。

常见问题

多个case执行（忘记使用该break语句）

使用 switch 语句时的一个常见错误是在每个 case 后面都没有包含break语句。此错误会导致执行所有的case.

不正确的比较值和类型

switch 语句使用严格比较，这在比较不同数据类型时可能会导致意外结果。在下面的示例中，字符串"2"不等于数字2。

const num = '2';
switch (num) {
  case 2:
    console.log(2);
    break;
  default:
    console.log('不是数字2');
}
// 输出 不是数字2

范围界定问题

switch 语句中的一个常见错误是声明了没有块作用域或不正确作用域的变量，导致它们在其他情况下可以访问，或者产生语法错误。

总结

到此这篇关于JavaScript的switch用法的文章就介绍到这了,更多相关js的switch用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！