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("成绩不合格") } }