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