JavaScript Switch 语句（含代码示例）

JavaScript 编程中最基本的部分之一是创建条件来决定要执行的操作。这篇教程将帮助你学习如何使用 switch 关键字创建多个条件。

如何使用 JavaScript switch 语句

JavaScript switch 关键字用于创建多个条件语句，使你可以根据不同的条件执行不同的代码块。

下面的代码展示了一个 switch 语句：

var score = 20;

switch(age){
    case 10:
        console.log("Score value is 10");
        break;
    case 20:
        console.log("Score value is 20");
        break;
    default:
        console.log("Score value is neither 10 or 20");
}

上面的代码将在控制台中打印 "Score value is 20"。switch 语句将比较给定的 表达式 与每个 case 中的表达式。

首先，你需要将一个 表达式 传递到 switch 语句中，然后将其括在一对圆括号 () 中。你可以传递变量或一个值，如下所示：

var age = 29;

switch(age){}
// or
switch(true){}
switch("A string"){}
switch(5+5){}

该 表达式 将被计算一次，然后自上而下与每个 case 子句中的表达式进行比较。

在下面的示例中，switch 语句将评估变量 flower 的值，然后将其与每个 case 语句进行比较，以查看其是否返回 true：

• 如果 flower === "rose"，则符合第一个 case
• 如果 flower === "violet"，则符合第二个 case
• 如果 flower === "sunflower"，则符合第三个 case
• 当所有三个 case 子句都返回 false 时，将执行 default，即默认情况

var flower = "tulip";

switch (flower){
    case "rose":
        console.log("Roses are red");
        break;
    case "violet":
        console.log("Violets are blue");
        break;
    case "sunflower":
        console.log("Sunflowers are yellow");
        break;
    default:
        console.log("Please select another flower");
}

default 默认情况是可选的，这意味着你可以简单地在 switch 语句中运行而不会生成任何输出。但是最好包含一个 default 默认情况，以便你知道 JavaScript 已经正确执行 switch 语句。

switch 语句只能包含一种默认情况，否则 JavaScript 会抛出错误。

最后，需要在每个 case 子句中包含 break 关键字，以在找到匹配的 case 后停止执行 switch 语句。如果没有 break 关键字，JavaScript 将继续评估表达式，直到最后一个 case 子句为止。

以下代码将同时打印 "Roses are red" 和 "Please select another flower"，因为 case 子句中没有 break 关键字，从而使 JavaScript 继续将表达式比较至最后一个 case，即 default 默认情况：

var flower = "rose";

switch (flower){
    case "rose":
        console.log("Roses are red");
    case "violet":
        console.log("Violets are blue");
    case "sunflower":
        console.log("Sunflowers are yellow");
    default:
        console.log("Please select another flower");
}

即使表达式 "rose" 已经在第一个 case 子句中找到匹配项，JavaScript 也仍然继续运行 switch 语句，因为没有 break 关键字。

注意：在最后一种情况中，不需要使用 break 关键字，因为 switch 语句到那里已经执行完毕了。

总结一下，这是 switch 语句的运行方式：

• 首先，你需要一个要与某些条件进行比较的 表达式
• 然后，编写所有条件以与每个 case 子句中的表达式进行比较，包括没有匹配的 case 时的 default 情况
• 最后，编写要在每个 case 中执行的代码，含有 break 关键字，以使 JavaScript  停止继续 表达式 与 case 子句进行比较。

现在你知道了 switch 语句的运行原理，让我们学习何时应使用 switch 语句，而不是 if..else 语句。

什么时候使用 switch 语句

switch 语句和 if..else 语句均用于创建条件。经验法则是：仅当条件有精确值时才使用 switch 语句。

这是因为 if..else 语句可用于将 表达式 与不精确的值（例如，大于或小于）进行比较：

var score = 70;

if(score > 50){
  console.log("Score is higher than 50");
} else {
  console.log("Score is 50 or lower");
}

但是你不能使用 score > 50 作为一个 case 语句的条件。下面的例子将在 score > 50 时仍然打印 default 情况：

var score = 70;

switch(score){
    case score > 50:
        console.log("Score is higher than 50");
        break;
    default:
        console.log("Score is 50 or lower");
}

如果要使用 switch 语句评估不精确的值，则需要通过评估值为 true 的表达式来创建变通方法，如以下代码所示：

var score = 70;

switch(true){
    case score > 50:
        console.log("Score is higher than 50");
        break;
    default:
        console.log("Score is 50 or lower");
}

尽管上面的代码可以运行，但是为了让代码更具有可读性，还是使用 if..else 语句更好。

谢谢你阅读这篇教程

你可能还对我编写的其他 JavaScript 教程感兴趣，包括“查找 JavaScript 字符串长度”和“如何将字符串的首字母改为大写形式”。这些问题是最常见的 JavaScript 问题。

我还提供有关 Web 开发教程（主要是与 JavaScript 相关的内容）的订阅邮件。

原文：JavaScript Switch Statement – With JS Switch Case Example Code，作者：Nathan Sebhastian