浅析switch

最新推荐文章于 2024-08-14 15:45:18 发布

我爱丁丁猫

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量168

点赞数

分类专栏：前端文章标签： javascript switch

原文链接：https://www.mk2048.com/blog/blog.php?id=h110hbchaaaa&title=%E6%B5%85%E6%9E%90switch

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

先声明下：本文中的switch仅限于JS，我并未查阅过其他编程语言中switch的语法，但有朋友反映在OC中并不适用！

一、switch语句基础概念

　　属于选择结构，一般用于选择要执行的多个代码块之一。

基本语法

switch(expression) {

case value1:
            执行代码块 1
            break;
case value2:
             执行代码块 2
             break;
default:
             表达式，与 case 1 和 case 2 不同时执行的代码

}

　　工作原理：首先设置表达式，通常是一个变量。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。可以使用break来阻止代码向下一个case执行。

二、switch的应用

　　好的，根据以上的概念，switch可以用于对表达式的值进行简单判断，并执行不同情况的代码块。

　　例如以下这种简单的情况：

 1 //判断今天是星期几
 2 
 3 var day=new Date().getDay();
 4 
 5 switch (day)
 7 {
 9 case 0: 
11   x="Today it's Sunday";
13   break;
15 case 1:
17   x="Today it's Monday";
19   break;
21 case 2:
23   x="Today it's Tuesday";
25   break;
27 case 3:
29   x="Today it's Wednesday";
31   break;
33 case 4:
35   x="Today it's Thursday";
37   break;
39 case 5:
41   x="Today it's Friday";
43   break;
45 case 6:
47   x="Today it's Saturday";
49   break;
51 }

　　看起来，并没有if语句用着方便。因为，似乎case只能设置常量，对范围值的判断并没有if语句出色，但是请看下面的例子：

 1 var num = parseInt(window.prompt('输入成绩'));
 2 
 3 switch(true)
 5 {
 7 　　case num>=90 && num<=100:
 8 
 9 　　　　alert('A');
11 　　　　break;
12 
13 　　case num>=80 && num<90:
14 
15 　　　　alert('B');
17 　　　　break;
18 
19     default:
20 
21        alert('C');
23        break;
25 }

　　这个例子或许会让人心生疑惑，为什么case后又能设置表达式呢，而且可以正确判断呢，这又必须从switch的工作原理开始说起。

三、switch的工作原理

　　先回顾一下switch的工作原理：

　　首先设置表达式，通常是一个变量。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。可以使用break来阻止代码向下一个case执行。

　　这段话摘自w3school关于switch的介绍，原文并没有什么问题，但是我们经常忽略的一个地方是 case 的值！在《JavaScript高级程序设计》一书中，对 case 的定义是value（值），这也很容易让人误解为一个常量，当然，书中也介绍了 case 用表达式的情况，但却并未具体说明。

　　那么，case到底可以设置什么呢？其实，查阅ECMA后，一切就很清楚了：

switch(Expression) CaseBlock

CaseClause:case Expression:

Return Normal Completion(empty).

CaseClause:case Expression:StatementList

Return the result of evaluating StatementList.

DefaultClause:default:

Return Normal Completion(empty).

DefaultClause:default:StatementList

Return the result of evaluating StatementList.

　　摘自——ECMA-262

　　先不管那些看不明白的英文，锁定一个关键词“Expression”——表达式，这下就清楚了， case 后面也可以跟表达式！

　　现在，让我们再梳理一次switch的工作原理：

　　1.switch（expression）先获取expression的值作为引用；

　　2.逐个case遍历，计算表达式，表达式的值并不会影响switch判断的基准，因为第一步已经获取了引用；

　　3.若匹配case，就执行匹配case的代码块，若带终止（如break）的话，就停止遍历剩下的case。

　　4.若无匹配的case，case将全部遍历一遍。

　　知道了工作原理，让我们再来看看上一个例子：

 1 var num = 70;
 2 
 3 switch(true)  //引用true的值
 5 {
 7 　　case num>=90 && num<=100: //遍历case1，计算表达式，表达式值为false，两个值不全等，继续遍历下一项
 9 　　　　alert('A');
11 　　　　break;
13 　　case num>=80 && num<90:  //遍历case2，计算表达式，表达式值为false，两个值不全等，继续遍历下一项
14 　　　　alert('B');
15 　　　　break;
16 　　default:                //以上case都不满足，执行此处代码块
18 　　　　alert('C');
20 　　　　break;
22 }
23 
24 //执行结果： alert('C');

　　讲到这里，相信大家对switch有更深入了理解了，或许可以试试下面的例子：

 1 var num = 4;
 2 
 3 switch (num)
 5 {
 7 　　case num = 1:           
 9 　　　　alert("1");
11 　　　　break; 
13 　　case num = 1:
15 　　　　alert("1");
17 　　　　break; 
19 　　case num = 3: 
21 　　　　alert("3");
23 　　　　break;
25 　　default:
27 　　　　alert("以上都不执行");
29 　　　　alert(num);
31 　　break;
33 }
36 
37 //执行结果：以上都不执行，3