JavaScript Switch 语句

软件技术NINI

于 2024-08-14 00:00:00 发布

阅读量510

点赞数 11

分类专栏： js 文章标签： javascript 前端网络

本文链接：https://blog.csdn.net/2301_78133614/article/details/141163445

版权

js 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

switch 语句用于基于不同条件执行不同动作。

JavaScript Switch 语句

请使用 switch 语句来选择多个需被执行的代码块之一。

语法

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

代码解释：

计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配，则执行关联代码

实例

getDay() 方法返回 0 至 6 之间的周名数字（weekday number）。

(Sunday=0, Monday=1, Tuesday=2 ..)

本例使用周名数字来计算周的名称：

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var day;
        switch (new Date().getDay()){
            case 0:
            day="星期天";
            break;
            case 1:
            day="星期一";
            break;
            case 2:
            day="星期二";
            break;
            case 3:
            day="星期三";
            break;
            case 4:
            day="星期四";
            break;
            case 5:
            day="星期五";
            break;
            case 6:
            day="星期六";
            break;
        }
        document.getElementById("demo").innerHTML="今天是"+day;
    </script>
</body>
</html>
//今天是星期一

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键词

default 关键词规定不存在 case 匹配时所运行的代码

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var text;
        switch (new Date().getDay()){
            case 0:
            day="今天是星期天";
            break;
            case 6:
            day="今天是星期六";
            break;
            default:text="期待周末"
        }
        document.getElementById("demo").innerHTML=text;
    </script>
</body>
</html>
//期待周末

默认的 case 不必是 switch 代码块中最后一个 case：

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var text;
        switch (new Date().getDay()) {
            default:
                text = "期待周末";
                break;
            case 0:
                day = "今天是星期天";
                break;
            case 6:
                day = "今天是星期六";
        }
        document.getElementById("demo").innerHTML = text;
    </script>
</body>

</html>
//期待周末

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。

常见的代码块

有时您会需要不同的 case 来使用相同的代码。

在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var text;
        switch (new Date().getDay()) {
            case 4:
            case 5:
                text = "周末马上就到了";
                break;
            case 0:
            case 6:
                day = "今天是星期六";
                break;
            default:
                text = "期待周末";
        }
        document.getElementById("demo").innerHTML = text;
    </script>
</body>

</html>
//期待周末

Switching 的细节

如果多种 case 匹配一个 case 值，则选择第一个 case。

如果未找到匹配的 case，程序将继续使用默认 label。

如果未找到默认 label，程序将继续 switch 后的语句。

严格的比较

Switch case 使用严格比较（===）。

值必须与要匹配的类型相同。

只有操作数属于同一类型时，严格比较才能为 true。

在这个例子中，x 将不匹配：

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var x = "0";
        switch (x) {
            case 0:
                text = "off";
                break;
            case 1:
                text = "On";
                break;
            default:
                text = "未找到值"
        }
        document.getElementById("demo").innerHTML = text;
    </script>
</body>

</html>
//未找到值