switch语句
switch
语句是另外一种JavaScript
的条件分支语句,相比于if
,在某些情况下,switch
语句更加简洁、可读。
基本语法加实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="week" id="week"></div> <script> var day = new Date().getDay(); var week =document.getElementById("week"); console.log(week); switch (day){ case 0: week.innerHTML="星期日" break; case 1: week.innerHTML="星期1" break; case 2: week.innerHTML="星期2" break; case 3: week.innerHTML="星期3" break; case 4: week.innerHTML="星期4" break; case 5: week.innerHTML="星期5" break; case 6: week.innerHTML="星期6" break; } </script> </body> </html>
switch
语句由一个条件语句,至少一个case
代码块和一个可选的default
语句。
以上代码是自动获取当前星期的js代码
以上案例对初学者可能有些复杂,就以if
为例,以上switch
语句等同于:
var value = exp; if(value === 'val1'){ //代码块1 }else if(value === 'val2'){ //代码块2 }else if(...){ //... }else{ //相当于default }
二者的对比可以发现,switch
语句相较于if
更加简洁。
break的用途
在switch
语句中,break
语句占有非常重要的地位,通常情况下,每个case
代码段末尾都应该添加一个break
语句。
如果不添加break
,在执行完一个case
后,不会跳出switch
语句,而是继续执行下一个case
代码块,这是switch
的重要特性。
举个例子:
var num = 6; switch( num ){ case 3: alert(num); break; case 5: alert(num); break; case 6: alert(num); break; case 7: alert(num); break; default: alert(num); break; }
以上代码只会执行case 6
这种情况,也就是先弹出一个6
,随后遇到break
结束switch
语句的执行。
如果不写break
,就会执行case 6
以及case 6
后面的所有case
,直到遇见break
语句结束执行。
switch的表达式
和if
一样,任何表达式都可以成为switch
的判断条件。
var num = '3'; var val = 7; switch( num * 2){ case val - 1: alert(val - 1); break; case val - 2: alert(val - 2); break; case val - 3: alert(val - 3); break; default: alert("?"); break; }
这里num * 2
返回6
,等于 val - 1
,就会弹出6
。
case分组
上面的例子都是一个case
对应一个代码块,我们还可以使用多个case
指向同一个代码块。
举个栗子:
var num = prompt("输入一个数字"); switch( num % 3){ case 0: alert("3的倍数"); break; case 1: case 2: alert("不是3的倍数"); }
num % 3
的值包括0
、1
、2
三种情况,当为0
的时候表示num
是3
的倍数,其他情况不是3
的倍数。
如果我们输入的数不是3
的倍数,那么num % 3
的结果不论1
还是2
都会执行相同的代码块。
这种case
分组的能力实际上是去掉break
的副作用,在上例中,正是由于case 1
没有break
语句,导致1、 2
两种情况执行同样的操作。
类型必须相同
switch的比较机制是严格相等,所以必须保持表达式和case中的内容类型相同。
举个栗子:
var num = prompt("请输入一个数字",3); switch( num ){ case '1': alert(num); break; case '2': alert(num); break; case 3: alert(num); break; }
以上代码中case 3
永远不会执行,这是因为prompt
只能返回字符串类型的值,而case 3
是数字类型,所以永远不能匹配。
课后练习
理解以下代码进行练习
<script> var score; score = +(window.prompt("请输入个人成绩0~100")); var lever =parseInt(score/10); if(score>100 || score<0){ alert("成绩不得大于100小于0") }else if(isNaN(score)){ alert("请输入正确成绩w") }else{ switch (lever){ case 10: case 9: alert("成绩优秀") break; case 8: alert("成绩优良") break; case 7: case 6: alter("成绩合格") break; default: alert("成绩不合格") } }