JavaScript switch 语句

在 JavaScript 中，选择结构共有 2 种方式： if 语句和 switch 语句。上一节介绍了 if 语句，这一节再来给大家介绍一下 switch 语句。

JavaScript switch 语法

在 JavaScript 中，当条件分支比较多（超过 3 个）时，使用 switch 语句会比 if 语句更加简单方便。

语法：

switch (判断值) {
    case 取值1:
        // 语块1; 
        break;
    case 取值2:
        // 语块2; 
        break;
    ……
    case 取值n:
        // 语块n; 
        break;
    default:
        // default语块;
}

说明：

switch 语句会根据 “判断值” 来判断，然后来选择使用哪一个 case。如果每一个 case 的取值都不符合，那就执行 default 的语句。

需要注意的是，switch 语句在比较值时，使用的是 “全等匹配 (===)”。，也就是说，只有类型和值都相等时才能匹配成功。例如，字符串 "1" 是无法匹配数字 1 的。

提示: switch 是 “开关”，case 是 “情况”，break 是 “断开”，default 是 “默认”。小伙伴们根据英文意思来理解就会非常简单。

JavaScript switch 示例

接下来，我们通过几个简单的例子来讲解 JavaScript switch 语句是如何使用的。

示例 1：switch 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const day = 3;
        let week;

        switch (day) {
            case 1:
                week = "星期一";
                break;
            case 2:
                week = "星期二";
                break;
            case 3:
                week = "星期三";
                break;
            case 4:
                week = "星期四";
                break;
            case 5:
                week = "星期五";
                break;
            case 6:
                week = "星期六";
                break;
            default:
                week = "星期日";
        }

        console.log("今天是：", week);    // 输出星期几
    </script>
</body>
</html>

运行结果如下。

今天是：星期三

分析：

在 switch 语句中，JavaScript 会从第 1 个 case 开始判断，直到找到满足条件的 case 就会退出，然后后面的 case 就不会执行了。

对于 switch 和 case，小伙伴们都知道是怎么一回事，却不太理解 break 和 default 有什么用。下面我们通过两个例子来理解一下。

示例 2：switch 中的 break 语句

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const day = 5;
        let week;

        switch (day) {
            case 1:
                week = "星期一"; 
            case 2:
                week = "星期二"; 
            case 3:
                week = "星期三"; 
            case 4:
                week = "星期四"; 
            case 5:
                week = "星期五"; 
            case 6:
                week = "星期六"; 
            default:
                week = "星期日";
        }

        console.log(week);    // 输出星期几
    </script>
</body>
</html>

运行结果如下。

星期日

分析：

day 的值为 5，为啥最终输出的是 “星期日” 呢？其实，这就是缺少 break 语句的结果。

实际上，在 switch 语句中，首先会判断 case 的值是否符合 day 的值。因为 day 的值为 5，因此会执行 “case 5” 这一分支。但由于没有在 “case 5” 后面加 break 语句，因此程序还会把后面的 “case 6” 以及 “default” 都执行了，后面 week 的值会覆盖前面 week 的值，最终输出的是 “星期日”。

break 语句用于结束 switch 语句，从而使 JavaScript 仅仅执行对应的一个分支。如果没有了 break 语句，则该 switch 语句中 “对应的分支” 被执行后还会继续执行后面的分支。

因此，对于 switch 语句，一定要在每一个 case 语句后面加上 break 语句。一定记住！不过需要清楚的是，default 语句如果放在最后（注意这个前提），是可以不加上 break 语句的。

提示: 对于 default 语句，我们也建议加上 break，这主要是为了 “防御性编程”。万一以后有人在 default 后面又加了一个 case，而你忘了补 break，就会导致严重的 Bug。

示例 3：switch 中的 default 语句

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const n = 10;

        switch (n) {
            case 1:
                console.log("你选择的数字是：1");
                break;
            case 2:
                console.log("你选择的数字是：2");
                break;
            case 3:
                console.log("你选择的数字是：3");
                break;
            case 4:
                console.log("你选择的数字是：4");
                break;
            case 5:
                console.log("你选择的数字是：5");
                break;
            default:
                console.log("你选择的数字不在 1~5 之间");
                break;
        }
    </script>
</body>
</html>

运行结果如下。

你选择的数字不在 1~5 之间

分析：

在上面例子中，我们使用 default 语句来定义默认情况，因此无论 n 的值是 10、12 还是 100，最终执行的也是 default 这一个分支。此外，case 后面的取值不仅仅是数字，也可以是字符串等。

深入了解 switch 语句

对于 JavaScript switch 语句来说，小伙伴们还需要清楚以下 2 点。

在 switch 语句中，多个 case 可以共用一组语句。
switch 语句中的 default 不是必须的。

示例 4：多个 case 共用一组语句

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const n = 5;

        switch (n) {
            case 1:
            case 2:
            case 3:
            case 4:
            case 5:
                console.log("你输入的数字在 1~5 之间");
                break;
            default:
                console.log("你输入的数字不在 1~5 之间");
                break;
        };
    </script>
</body>
</html>

运行结果如下。

你输入的数字在 1~5 之间

分析：

对于 switch 语句来说，多个 case 可以共用一组执行语句，上面这个例子就很好地展示了这一点。

示例 5：default 语句不是必须的

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const day = 5;

        switch(day) {
            case 1:
                console.log("今天是星期一");
                break;
            case 2:
                console.log("今天是星期二");
                break;
            case 3:
                console.log("今天是星期三");
                break;
            case 4:
                console.log("今天是星期四");
                break;
            case 5:
                console.log("今天是星期五");
                break;
            case 6:
                console.log("今天是星期六");
                break;
            case 7:
                console.log("今天是星期日");
                break;
        };
    </script>
</body>
</html>

运行结果如下。

今天是星期五

分析：

对于 switch 来说，default 语句不是必须的。比如上面这个例子，一周只有 7 天，我们可以完全枚举出来，这个时候就不需要用到 default 语句了。

最后，对于 JavaScript 的 switch 语句，我们可以总结出以下 4 点。

每一个 case 后面都必须加上 break 语句，而 default 语句则不需要。
每一个 case 后面的值必须各不相同，但是可以不分先后顺序。
多个 case 可以共用一组执行语句。
在 switch 语句中，default 语句不是必需的。