JavaScript switch 语句基础与进阶用法

JavaScript switch 语句

---

switch 语句用于基于不同的条件来执行不同的动作

---

请使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与case 1和case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

基础用法：

switch 语句是 if 语句的兄弟语句。

开发者可以用 switch 语句为表达式提供一系列的情况（case）。

switch 语句的语法：

switch (expression)
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
  case value: statement;
    break;
...
  case value: statement;
    break;
  default: statement;

每个情况（case）都是表示“如果 expression 等于 value，就执行 statement”。

关键字 break 会使代码跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一个 case。

关键字 default 说明了表达式的结果不等于任何一种情况时的操作（事实上，它相对于 else 从句）。

switch 语句主要是为避免让开发者编写下面的代码：

if (i == 20)
  alert("20");
else if (i == 30)
  alert("30");
else if (i == 40)
  alert("40");
else
  alert("other");

等价的 switch 语句是这样的：

switch (i) {
  case 20: alert("20");
    break;
  case 30: alert("30");
    break;
  case 40: alert("40");
    break;
  default: alert("other");
}

实例

显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：

var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}

x 的运行结果：今天是星期一

default 关键词

请使用 default 关键词来规定匹配不存在时做的事情：

实例

如果今天不是星期六或星期日，则会输出默认的消息：

var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}

x 的运行结果：期待周末

进阶用法：

在两种情况相同时，switch 语句的使用。当两种情况相同时，可以只在第二种情况中写要执行的代码，案例如下：

//测试 switch语句，当 两种情况相同时，比如下面的10或者11，都会走 alert("10或者11") 这里        
switch (number) {
    case 1:
        alert(1);
        break;
    case 10:
    case 11:
        alert("10或者11"); //number = 10 或者 = 11执行相同的操作
        break;
    default:
        alert("既不是1，10，11");
}

以上方法虽然能够完成测试代码，但明显不是我们想要的效果，因此和要说的进阶用法并没有什么关系。

那么重头戏来了（敲黑板！）

首先，以上的内容来自菜鸟教程 对switch语句的介绍，而Mozilla开发者网络|MDN  中的介绍是这样的：

switch 语句评估一个表达式，将表达式的值与case子句匹配，并执行与该情况相关联的语句。

根据上面的描述我们可以得知case的值除了简单值之外，还可以是各种表达式，switch (n){...}中的n会和case中的表达式的结果值进行比较（"==="），由此，我们可以这样：

var n = 7;
switch (true) {
    case n < 0:
        //当n值小于0时
        console.log("n<0");
        break;
    case n < 5:
        //当n值小于5时
        console.log("0<n<5");
        break;
    case n < 10:
        //当n值小于10时
        console.log("5<n<10");
        break;
    default:
        // 当以上条件都不匹配时
        console.log("n>10");
}

所以，只要你想得到的，只要符合规则，都能用switch实现！