JavaScript Switch 语句指南及示例

0 Shares

在 JavaScript 中，switch 语句是一种用于控制程序流程的条件语句。它特别适用于创建包含多个分支的条件代码块。

本文将深入探讨 switch 语句及其应用方法。我们还将它与其它条件结构（如 if 语句和三元运算符）进行比较，帮助你更好地选择合适的工具。

JavaScript 中的 `switch` 语句是什么？

JavaScript 中的 switch 语句根据表达式的值决定执行哪个代码分支。它是 JavaScript 中处理条件逻辑的两种主要语句之一。

另一种是 if 语句，以及三元运算符。 switch 语句的功能与它们非常相似，但其独特的特性使其在某些情况下表现更佳。本文将详细剖析这些细节。

如何使用 JavaScript `switch` 语句

在本节中，我将详细解释 JavaScript 的 switch 语句及其使用方法。我将通过代码示例进行演示，因此你需要一个 JavaScript 运行环境来跟随。推荐使用这个在线 JavaScript 编译器。或者，您也可以参考我们关于最佳在线 JavaScript IDE 的文章。

一般语法

switch 语句的基本语法如下：

switch(<expression>) {
    case <value 1>:
        <statements>
        break;
    case <value 2>:
        <statements>
        break;
    default:
        <statements>
}

switch 关键字标志着 JavaScript switch 语句块的开始。在圆括号内，你可以放置任何 JavaScript 表达式。表达式是任何可以计算出值的代码片段，例如字符串或数字等字面量、变量或函数调用。

接下来，在大括号内添加 switch 语句的主体。主体由多个 case 分支组成。每个 case 都有一个值和一组待执行的语句。如果圆括号中的表达式的值与某个 case 的值匹配，则执行该 case 的语句。

在每个 case 分支的末尾，可以添加 break 关键字。这并非强制要求。如果添加了 break，JavaScript 将在遇到它时立即跳出 switch 代码块。如果没有 break，JavaScript 将继续执行其后的所有 case 分支，这被称为“穿透”。除非你需要利用穿透特性，否则建议在每个 case 分支末尾都添加 break。

最后一个需要注意的关键字是 default。当圆括号中的表达式的值与任何 case 值都不匹配时，将执行 default 分支中的语句。

例子

本节将通过不同示例展示 switch 语句的用法。

#1. 带有穿透

以下示例演示了如何在不使用 break 关键字的情况下使用 switch 语句。这样做是为了展示“穿透”的效果。

在这个例子中，我们将编写代码处理不同的 HTTP 状态码：

const statusCode = <在这里插入状态码>

switch (statusCode) {
    case 200:
        console.log('OK');
    case 301:
        console.log('Redirect');
    case 403:
        console.log('Forbidden');
    case 404:
        console.log('Not Found');
    case 500:
        console.log('Internal Server Error')
}

在上述代码片段中，我们检查一个值是否等于特定的状态码，然后打印描述该状态码的消息。

观察一下当状态码设置为 403 时会发生什么。

在与 403 这个 case 匹配后，其后的所有 case 分支也都被执行了。这就是“穿透”现象。这通常不是我们想要的结果，因为我们通常希望只执行一个 case 分支。 JavaScript 的这个特性使得添加 break 关键字很有必要。

#2. 没有穿透

为了避免穿透，我们在每个 case 分支的末尾添加 break 关键字。以下示例演示了这样做之后会发生什么。

const statusCode = <在这里插入一个状态码>

switch (statusCode) {
    case 200:
        console.log('OK');
        break;
    case 301:
        console.log('Redirect');
        break;
    case 403:
        console.log('Forbidden');
        break;
    case 404:
        console.log('Not Found');
        break;
    case 500:
        console.log('Internal Server Error')
        break;
}

当你使用状态码 403 运行上述代码时，你会得到以下结果。

如你所见，代码现在只匹配一个 case 分支，避免了穿透。

#3. 有用的穿透

需要注意的是，在某些情况下，穿透可能会很有用。例如，考虑以下示例，我们需要根据方向输入来检查一个人是水平还是垂直移动。

const direction = '<输入方向>'

switch(direction) {
    case 'left':
    case 'right':
        console.log('水平移动');
        break;
    case 'up':
    case 'down':
        console.log('水平移动');
        break;
}

如果将方向设置为向左并运行上面的代码，结果如下：

当将方向设置为向右时，你仍然会得到相同的结果：

这是因为当 'left' 这个 case 匹配时，它会穿透到 'right' 这个 case 并打印 “水平移动”。但由于有 break 关键字，它不会穿透到 'up' 这个 case。当 'right' 这个 case 匹配时，它会执行对应的语句并中断。

因此，当方向为左或右时，会显示 “水平移动”。因此，“穿透”允许你在代码中创建 OR 逻辑。

#4. 匹配范围

JavaScript switch 语句检查 case 的值是否等于表达式的值。如果是，则执行该 case 分支的语句。然而，有时你可能需要检查某个值是否在给定的范围内。匹配范围可能比较棘手，但以下代码片段演示了一种解决方法。

在下面的示例中，我们实现一个程序，根据给定的分数打印出等级。例如，如果分数高于 90，程序将打印 A+。如果大于 80 但小于 90，则打印 A，依此类推。

为此，我在圆括号内放置了表达式 true。然后，每个 case 的值被定义为一个逻辑运算，仅当分数在该 case 的范围内时，该逻辑运算才为真。例如，只有当分数大于或等于 90 时，最后一个 case `mark >= 90` 才为 true。因此，它将与表达式的值匹配，因为 true 等于 true。

const mark = <替换为任何分数>;

switch (true) {
    case mark >= 50 && mark < 60:
        console.log('D');
        break;
    case mark >= 60 && mark < 70:
        console.log('C');
        break;
    case mark >= 70 && mark < 80:
        console.log('B');
        break;
    case mark >= 80 && mark < 90:
        console.log('A')
        break;
    case mark >= 90:
        console.log('A+')
        break;
    default:
        console.log('<50')
}

当分数设置为 80 时，上述代码的输出为：

当分数设置为 95 时：

当分数为 45 时：

词法作用域

switch 语句中 case 分支内的语句没有词法作用域。这意味着在一个 case 分支中定义的变量可以在不同的 case 分支中被访问。当你编写会匹配多个 case 分支的 switch 代码块时，理解这一点很重要。以下示例可以更好地说明这一点：

switch (true) {
    case true:
        let num = 10
    case true:
        console.log(num);
}

在上面的代码片段中，两个 case 分支都匹配。在第一个 case 分支中，我们定义了变量 num；在第二个 case 分支中，我们访问它的值。我们不会收到任何错误，正如你从下面的截图中所看到的那样：

`switch` 语句和其他条件语句之间的区别

switch 语句更适用于测试多个条件的场景。 if 语句适用于测试 2 个或 3 个条件的情况。三元运算符仅适用于当你想将条件表达为单行语句时的场景。

为了代码简洁，你应该优先考虑使用三元运算符。如果无法用三元运算符表达逻辑，则可以使用 if 语句。但如果这也不可行，你就可以选择 switch 语句。

结论

本文介绍了 switch 语句、如何使用它以及它的特殊之处。我们还讨论了何时使用它。

接下来，你可能想使用这些 JavaScript 速查表来进一步提升 JavaScript 技能。

JavaScript 中的 switch 语句是什么？

如何使用 JavaScript switch 语句