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实现!

posted @ 2018-03-12 16:12  _陈十一  阅读(238)  评论(0编辑  收藏  举报