一篇文章带你了解JavaScript switch

Karen110
• 阅读 1345

Switch是与if ... else ...相同的条件语句,不同之处在于switch语句允许根据值列表测试变量是否相等。switch 语句用于根据不同的条件执行不同的操作。

一、Switch 语句

使用switch语句选择要执行的多个代码块中的一个。

1. 语法


switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
}

2. 工作原理

switch 表达式求值一次。表达式的值与每个case的值进行比较。如果有匹配,则执行相关的代码块。

getDay() 方法返回一周0到6之间的数字。(Sunday=0, Monday=1, Tuesday=2 ..)。

3. 案例

使用的工作日数计算星期的名称:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>

  <p id="demo"></p>

  <script>
    var day;
    switch (new Date().getDay()) {
        case 0:
            day = "Sunday";
            break;
        case 1:
            day = "Monday";
            break;
        case 2:
            day = "Tuesday";
            break;
        case 3:
            day = "Wednesday";
            break;
        case 4:
            day = "Thursday";
            break;
        case 5:
            day = "Friday";
            break;
        case  6:
            day = "Saturday";
    }
    document.getElementById("demo").innerHTML = "今天是:" + day;
</script>


</body>
</html> 

一篇文章带你了解JavaScript switch

二、关键字


1. break 关键字

原理:当找到一个匹配,工作完成后,它跳出。如果没有,继续进行更多的测试。

一个break可以节省大量的执行时间,因为它忽略了break开关块中所有其他代码都要执行。在最后一个case块中没有必要使用break,因为无论如何它都会退出。


<script>
function myFunc() {
var num = Number(document.querySelector("input").value);
var text;
switch (num) {
   case 1:
    text = "您输入的号码是 1";
   case 2:
    text = "您输入的号码是 2";
   case 3:
    text = "您输入的号码是 3";
   case 4:
    text = "您输入的号码是 4";
   case 5:
    text = "您输入的号码是 5";
        braek;
   default:
    text = "执行默认语句";
}

document.getElementById('para').innerHTML = text;
}
</script>

一篇文章带你了解JavaScript switch

2. default 关键字

default 关键字指定在没有匹配的情况下运行的代码:

getDay() 方法返回一周0到6之间的数字。


switch (new Date().getDay()) {
    case 6:
        text = "星期六;
        break;
    case 0:
        text = "星期天";
        break;
    default:   /*如果今天不是星期六(6),也不是星期日(0),写一个default信息*/
        text = "其他星期";
}

一篇文章带你了解JavaScript switch

default 不一定放到最后一个语句块:


switch (new Date().getDay()) {
    default:
        text = "其他星期";
        break;
    case 6:
        text = "星期六;
        break;
    case 0:
        text = "星期天";
}

一篇文章带你了解JavaScript switch

测试时,是星期四,返回其他星期。

一篇文章带你了解JavaScript switch

注:

如果default不是开关块中的最后一个实例,请记住以break结束默认情况。

三、相同的代码块(优化)

有时你会希望不同的开关情况下使用相同的代码。

在本例中,案例4和5共享相同的代码块,而0和6共享另一个代码块:


<script>
            var text;
            switch (new Date().getDay()) {
                case 4:
                case 5:
                    text = "很快是周末";
                    break;
                case 0:
                case 6:
                    text = "这是周末";
                    break;
                default:
                    text = "期待周末";
            }
            document.getElementById("demo").innerHTML = text;
</script>

一篇文章带你了解JavaScript switch

四、总结

本文基于JavaScript 基础,介绍了switch语句的相关使用。通过工作原理的分析 案例的代码的解析,对于关键字的难点都做了详细的讲解。同时对代码进行了整合和优化。

代码很简单,希望能够帮助你学习。

**-----**------**-----**---**** End **-----**--------**-----**-****

一篇文章带你了解JavaScript switch

往期精彩文章推荐:

一篇文章带你了解JavaScript switch

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
3年前
JS - 关于一些代码规范
代码规范源文件强制JavaScript源文件必须以无BOM的UTF8编码。缩进强制必须采用4个空格缩进,不允许以Tab制表符或2个空格代替。强制switch中的case和default必须保持缩进。//正例switch(variable)case'1'://do...break
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
swift中更强大的switch和眼花缭乱的for in
从日记中整理出switch和forin。swift的switch比起oc真的是厉害坏了而且forin中的功能也比oc的更加灵活。小作笔记1.1swift中swich语句会将一个值与多个可能的模式匹配。然后基于第一个成功匹配的模式来执行合适的代码块,如果想要oc中匹配到case后依旧贯穿接下来的case则要增加fallthough。switch语句一
Wesley13 Wesley13
3年前
java认知打卡第三天
if语句、while语句、for语句,switch语句;break整体跳出switch和for语句;continue跳出for循环当前的一条,继续后面的循环。面向对象的设计(OOP),java完全的面向对象进行编码,也就是万物皆对象,以对象的属性和行为进行思考的方式,去理解java的编程思维。OOP将数据放在第一位,操作数据的算法放在了第二位。C语言
Wesley13 Wesley13
3年前
Java switch 语句使用 String 参数
原文同步至http://www.waylau.com/javaswitchusestring/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.waylau.com%2Fjavaswitchusestring%2F)当我尝试在switch语句使用String
Wesley13 Wesley13
3年前
C语言二次系统学习3(分支循环、函数)
本次学习,主要针对语句和函数两部分进行学习。分支语句(if,switch)与循环语句(while,for,dowhile)switch语句中,在每个选择之后如果不进行break跳出,会执行下一个case,而且应注意default语句的使用,一般会放在{}代码块的后方dowhile语句中,会首先执行一次循环,再进行判定,所以使用相对较少。whi
小万哥 小万哥
10个月前
C 语言中的 switch 语句和 while 循环详解
C语言中的switch语句替代多重if..else语句,可以使用switch语句。switch语句用于选择多个代码块中的一个来执行cswitch(表达式)casex://代码块break;casey://代码块break;default://代码块工作原理
小万哥 小万哥
9个月前
C# 循环与条件语句详解
CSwitch语句使用switch语句选择要执行的多个代码块中的一个。示例:csharpswitch(expression)casex://代码块break;casey://代码块break;default://代码块break;它的工作方式如下:1.评估
小万哥 小万哥
8个月前
Java break、continue 详解与数组深入解析:单维数组和多维数组详细教程
JavaBreak和ContinueJavaBreak:break语句用于跳出循环或switch语句。在循环中使用break语句可以立即终止循环,并继续执行循环后面的代码。在switch语句中使用break语句可以跳出当前case,并继续执行下一个case
小万哥 小万哥
7个月前
C++ While 和 For 循环:流程控制全解析
CSwitch语句使用switch语句选择要执行的多个代码块之一。语法cppswitch(expression)casex://代码块break;casey://代码块break;default://代码块它的工作原理如下:switch表达式被评估一次