switch语句以及与if的比较

HTML5学堂：JS的三大语句类型当中，有一种分支/选择性语句——switch。我们常说switch可以适当的和if配合使用，那么switch语句到底怎么书写，如何运用，和if语句的区别以及选用原则又是什么？一起来看今天的内容。

有时并不那么友好的if语句

条件语句，我们通常都使用if来处理，特别是针对一个范围区间，需要执行不同功能代码时，尤为可用。但是，一旦遇到如下这种情形，我们就会觉得if有些麻烦了~

1. if (rank == 'A') {
2.     console.log('优秀');
3. } else if (rank == 'B') {
4.     console.log('良好');
5. } else if (rank == 'C') {
6.     console.log('一般');
7. } else if (rank == 'D') {
8.     console.log('需要加油啦');
9. } else {
10.     console.log('差');
11. }

上面这种if结构，针对一种答案需要执行一种内容，且条件并非区间。此时，的确可以使用if语句，但是从视觉上来说，很容易造成的混乱，一旦代码出问题，排查错误相对比较麻烦，而switch语句恰恰可以解决这种尴尬。

switch语句的基本语法

如下为switch语句的基本语法：

1. switch(表达式A) {
2.     case 表达式1 : 代码段1;
3.     break;
4.     case 表达式2 : 代码段2;
5.     break;
6.     case 表达式3 : 代码段3;
7.     break;
8.     default : 代码段4;
9. }

1 表达式A是要进行判断/比对的表达式，让每个case后面的表达式与表达式A相比较，如果两者全等，则执行相应case后面的语句。

2 break关键字可以结束switch语句。break语句并非必须存在的，如果没有break，则从符合条件的case开始一直往下执行到switch结束或者遇到break。

3 default，一般用在最后，表示非以上的任何情况下而发生的情况。switch最后执行default语句，如果default后面带有break，那么程序就会正常跳出switch，否则，程序会继续向后执行switch语句。也就是说，不管default放在什么位置，它总是在最后一个处理，然后继续向下处理。

4 此外，可以有多个case的语句。(加入两种case要执行同样的内容，可以书写为 case 表达式1: case 表达式2: 代码段)

对于如上几点不是很清楚的童鞋不要着急，一会我们会书写例子。现在先来看看，如果我们使用switch代替if语句书写上面的例子，会不会变得简单一些呢？

switch书写刚刚的实例

1. <script>
2.     var rank = 'B';
3.     switch (rank) {
4.         case 'A' : console.log('优秀'); break;
5.         case 'B' : console.log('良好'); break;
6.         case 'C' : console.log('一般'); break;
7.         case 'D' : console.log('需要加油啦'); break;
8.         default : console.log('差'); break;
9.     }
10. </script>

很明显，针对这个例子，从可读性的角度来说，switch要简单的多。

switch语句中具体命令实例

关于break语句

如果在一个case命令后不书写break，会是什么结果？看如下例子：

1. <script>
2.     var rank = 'B';
3.     switch (rank) {
4.         case 'A' : console.log('优秀'); break;
5.         case 'B' : console.log('良好');
6.         case 'C' : console.log('一般');
7.         case 'D' : console.log('需要加油啦'); break;
8.         default : console.log('差'); break;
9.     }
10. </script>

此段代码会输出：“良好” “一般” “需要加油啦”。之所以是这个结果，就在于我们之前刚刚提过的：如果没有break，则从符合条件的case开始一直往下执行到switch结束或者遇到break。

关于default语句

如果defalut语句放在了前面怎么办呢？看如下例子：

1. <script>
2.     var rank = 'E';
3.     switch (rank) {
4.         default : console.log('差'); break;
5.         case 'A' : console.log('优秀'); break;
6.         case 'B' : console.log('良好'); break;
7.         case 'C' : console.log('一般'); break;
8.         case 'D' : console.log('需要加油啦'); break;
9.     }
10. </script>

此处rank为E，必然不符合A~D，所以执行default。输出“差”，之后遇到了break，直接跳出switch语句。

稍微调整一下代码：

1. <script>
2.     var rank = 'E';
3.     switch (rank) {
4.         default : console.log('差');
5.         case 'A' : console.log('优秀'); break;
6.         case 'B' : console.log('良好'); break;
7.         case 'C' : console.log('一般'); break;
8.         case 'D' : console.log('需要加油啦'); break;
9.     }
10. </script>

此处输出的则是“差” “优秀”。这就是说，不管default放在什么位置，它总是在最后一个处理，然后继续向下处理。。因此，为了避免出现错误的结果，最好办法就是每一个case以及default语句都要加一个break语句。

JS的switch与其他语言的不同

JS中的switch语句中可以使用任何数据类型(很多其他语言只能使用数值)，case的值也不一定是常量，也可以是表达式。如下面实例：

switch语句为表达式 - 实例

1. var x = 5;
2. switch(x > 3) {
3.     case true : console.log('x > 3'); break;
4.     case false : console.log('x <= 3'); break;
5. }

switch语句的case值为表达式 - 实例

1. switch("h5course") {
2.     case "h5" + "course": alert("h5course");
3.     break;
4.     case "HTML5Course" : alert("HTML5Course");
5.     break;
6.     default : alert("other");
7. }

需要注意的是，switch语句在进行值的比较时，使用的是全等操作符("===")，也就是说两个表达式的结果，既需要值一样，也要类型相同。

if与switch的选择

1 从视觉层面上来说，对于一部分功能，选用switch语句可以精简代码，提升视觉效果。

2 从性能角度来说，由于switch的条件简单，编译器会为它做二分法优化(或跳转表)，平均性能相对会高一些。而if else所比较的条件会远远比switch的复杂，编译器通常不会做过多的优化。简言之就是对于常量方面的条件判断，switch性能略胜于if语句。

到底何时使用switch？

如果需要判断的是几个常量的数据，建议使用switch；如果条件比较复杂（如：x > 3 && x < 10），建议使用if语句。

欢迎沟通交流~HTML5学堂