【前端自学之路】JS之switch

Javascript switch

switch 语句的格式

1
2
3
4
5
6
7
8
9
10
11
switch (表达式) {
case 常量1:
// 语句块
case 常量2:
// 语句块
case 常量3
// 语句块
...
default:
// 语句块
}

switch的执行过程:
第一步,计算表达式
第二步,把表达式的值和常量1比较,
如果相等,则执行语句块,然后继续后续所有的语句块,直到遇到break或者执行完default为止
如果不等,则继续判断表达式值和下一个case常量

我们来看个例子

1
2
3
4
5
6
7
8
9
10
switch (1) {
case 1:
console.log('1');
case 2:
console.log('2');
case 3:
console.log('3');
default:
console.log('default');
}

执行结果是:

1
2
3
4
1
2
3
default

我们继续来看下一个:

1
2
3
4
5
6
7
8
9
10
switch (2) {
case 1:
console.log('1');
case 2:
console.log('2');
case 3:
console.log('3');
default:
console.log('default');
}

执行结果是:

1
2
3
2
3
default

我们再来看一个:

1
2
3
4
5
6
7
8
9
10
switch (5) {
case 1:
console.log('1');
case 2:
console.log('2');
case 3:
console.log('3');
default:
console.log('default');
}

执行结果是:

1
default

从以上几个例子可以看出,匹配到case之后,会执行后续所有case的语句

这常常和我们的预期不一致、而且我们实际工作中的使用场景也有区别

我们场景的使用是和break

1
2
3
4
5
6
7
8
9
10
11
12
13
switch (2) {
case 1:
console.log('1');
break;
case 2:
console.log('2');
break;
case 3:
console.log('3');
break;
default:
console.log('default');
}

执行结果是:

1
2

从结果可以看到,匹配 case 2 之后,就结束不会继续执行后续的case语句体

至于break的功能,我们会再下一节介绍

坚持原创技术分享,谢谢鼓励我继续创作!