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都会执行相同的代码块。

类型必须相同

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;
}