helithus
新手
新手
  • 最后登录2018-01-03
  • 发帖数3
阅读:7996回复:0

JavaScript选择结构switch简析

楼主#
更多 发布于:2017-09-03 22:51
   一、switch语句基础概念
属于选择结构,一般用于选择要执行的多个代码块之一。

基本语法
switch(expression) {
case value1:
执行代码块 1
break;
case value2:
执行代码块 2
break;
default:
表达式,与 case 1 和 case 2 不同时执行的代码
}

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




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

例如以下这种简单的情况:
//判断今天是星期几var day=new Date().getDay();
switch (day){
case 0:x="Today it's Sunday";
break;case 1:
x="Today it's Monday";break;
case 2:x="Today it's Tuesday";
break;case 3:
x="Today it's Wednesday";break;
case 4:x="Today it's Thursday";
break;case 5:
x="Today it's Friday";break;
case 6:x="Today it's Saturday";
break;}

再请看下面的例子:
var num = parseInt(window.prompt('输入成绩'));switch(true)
{case num>=90 && num<=100:
alert('A');break;
case num>=80 && num<90:alert('B');
break;default:
alert('C');break;
}

case后是能设置表达式,而且可以正确判断。

三、switch的工作原理

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

这段话摘自w3school关于switch的介绍,原文并没有什么问题,但是我们经常忽略的一个地方是 case 的值!在查阅ECMA后,一切就很清楚了:

switch(Expression) CaseBlock
CaseClause:case Expression:Return Normal         Completion(empty).
CaseClause:case Expression:StatementListReturn the result of evaluating StatementList.
DefaultClause:default:Return Normal  Completion(empty).
DefaultClause:default:StatementListReturn 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将全部遍历一遍。

知道了工作原理,再看看上一个例子:
var num = 70;switch(true)         //引用true的值
{case num>=90 && num<=100:        //遍历case1,计算表达式,表达式值为false,两个值不全等,继续遍历下一项
alert('A');break;
case num>=80 && num<90:                //遍历case2,计算表达式,表达式值为false,两个值不全等,继续遍历下一项alert('B');
break;default:                                        //以上case都不满足,执行此处代码块
alert('C');break;
}//执行结果: alert('C');

再试试下面的例子:
var num = 4;switch (num)
{case num = 1:
alert("1");break;
case num = 1:alert("1");
break;case num = 3:
alert("3");break;
default:alert("以上都不执行");
alert(num);break;
}

//执行结果:以上都不执行3

为什么会执行default中的代码呢,在case1中,num被赋值为1了,那么num值与case2相等,应该执行case2中的代码呀?其实,再往上翻翻,看看switch的工作原理的第一句:switch(expression)先获取expression的值作为引用。
这表示,switch是引用num的值,所以在接下来case中,对num赋值的操作并不会影响switch在第一步中的引用值。

上一道例题的工作原理就可以解析为下面几步了:
1、引用num的值:4;
2、遍历case1,计算表达式,表达式num被赋值为1,两个值不全等,继续遍历下一项;此处,num值被重新赋值为1后,switch判断的基准值依然是4,因为判断基准是引用自num的值,在第一步已经获取了引用,所以在接下来的遍历中,case中对num的赋值操作,并不会影响switch的判断基准值;
3、遍历case2,计算表达式,表达式num被赋值为1,两个值不全等,继续遍历下一项;4、遍历case2,计算表达式,表达式num被赋值为3,两个值不全等,继续遍历下一项;
5、以上结果都不匹配,执行此处代码,此时,num的值为3。

最新喜欢:

14k14k sunshinesunshi...
游客


返回顶部

公众号

公众号