switch语句
switch
语句是另外一种JavaScript
的条件分支语句,相比于if
,在某些情况下,switch
语句更加简洁、可读。
语法
switch( exp ){
case 'val1':
...//代码块1
break;
case 'val2':
...//代码块2
break;
...
default:
}
switch
语句由一个条件语句exp
,至少一个case
代码块和一个可选的default
语句。
以上代码的用途是:
- 比较表达式
exp
的结果和第一个case
(就是val1
)是否严格相等,如果相等就执行代码块1
,直到break
语句,否则执行2
; - 比较表达式
exp
的结果和第二个case
(就是val2
)是否严格相等,如果相等就执行代码块2
,直到break
语句, 否则执行3
; - 比较表达式
exp
的结果和第三case
…
…
如果没有case
等于exp
的值,最后就执行default
代码块(如果有的话)。
以上解释可能有点绕,就以if
为例,以上switch
语句等同于:
let 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
的重要特性。
举个例子:
let 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
语句结束执行。
举个例子:
let num = 6;
switch( num ){
case 3:
alert(num);
case 5:
alert(num);
case 6:
alert(num);
case 7:
alert(num);
default:
alert(num);
}
以上代码就会连续弹出三个6
,后面两个6
就是case 7
和default
的代码块。
switch表达式
和if
一样,任何表达式都可以成为switch
的判断条件(表达式exp
)。
let num = '3';
let 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
指向同一个代码块。
举个栗子:
let num = prompt("输入一个数字",0);
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
中的内容类型相同。
举个栗子:
let 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
是数字类型,所以永远不能匹配。
课后作业
- 将下面的代码用
if else
重构
switch(phone){
case 'xiaomi':
alert('xiaomi');
break;
case '苹果':
alert('苹果');
break;
case '华为':
alert('华为');
break;
default:
alert('others')
break;
}