JavaScript-switch

switch 格式

switch(表达式){
    case 表达式A:
        语句A;
        break;
    case 表达式B:
        语句B;
        break;
    ... ...
    default:
        前面所有case都不匹配执行的代码;
        break;
}

switch 特点

会从上至下的依次判断每一个 case 是否和 () 中表达式的结果相等, 如果相等就执行对应 case 后面的代码, 如果前面所有的 case 都不匹配, 那么就会执行 default 后面的代码。
并且所有的 case 和 default 只有一个会被执行, 并且只会被执行一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let day = 7;
        switch (day) {
            case 1:
                console.log("星期1");
                break;
            case 2:
                console.log("星期2");
                break;
            case 3:
                console.log("星期3");
                break;
            default:
                console.log("Other");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

switch 注意点

case 判断的是 ===, 而不是 ==。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let num = 123;
        switch (num) {
            case "123":
                console.log("字符串123");
                break;
            case 123:
                console.log("数值的123");
                break;
            default:
                console.log("Other");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

() 中可以是常量也可以是变量还可以是表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        switch (123) {
            case 123:
                console.log("数值的123");
                break;
            default:
                console.log("Other");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let num = 123;
        switch (num) {
            case 123:
                console.log("数值的123");
                break;
            default:
                console.log("Other");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        switch (122 + 1) {
            case 123:
                console.log("数值的123");
                break;
            default:
                console.log("Other");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

case 后面可以是常量也可以是变量还可以是表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let num = 123;
        switch (123) {
            // case 123: // 常量
            // case num: // 变量
            case 100 + 23: // 表达式
                console.log("数值的123");
                break;
            default:
                console.log("Other");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

break 的作用是立即结束整个 switch 语句。
在 switch 语句中一旦 case 或者 default 被匹配, 那么其它的 case 和 default 都会失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let num = 1;
        switch (num) {
            case 1:
                console.log("1");
                break;
            case 2:
                console.log("2");
                break;
            default:
                console.log("Other");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

default 不一定要写在最后。
switch 中的 default 无论放到什么位置, 都会等到所有 case 都不匹配再执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let num = 7;
        switch (num) {
            case 1:
                console.log("1");
                break;
            default:
                console.log("Other");
                break;
            case 2:
                console.log("2");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

和 if / else 中的 else 一样, default 也可以省略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let num = 7;
        switch (num) {
            case 1:
                console.log("1");
                break;
            case 2:
                console.log("2");
                break;
        }
    </script>
</head>
<body>

</body>
</html>

if 和 switch 如何选择

需求: 要求判断一个数是否是大于 100 的数

在企业开发中如果是对区间进行判断, 那么建议使用 if。
在企业开发中如果是对几个固定的值的判断, 那么建议使用 switch。
原则: 能用 if 就用 if。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        let num = 20;

        if (num > 100) {
            alert("大于100的数");
        } else {
            alert("不大于100的数");
        }

        switch (num) {
            case 101:
            case 102:
            case 103:
            case 104:
        }
    </script>
</head>
<body>

</body>
</html>