switch (Statements) – JavaScript 中文开发手册

作者: Arvin Chen 分类: JavaScript 来源: Break易站(www.breakyizhan.com)
  •   JavaScript 中文开发手册

    switch (Statements) - JavaScript 中文开发手册

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

    语法

    switch (expression) {
      case value1:
        //Statements executed when the result of expression matches value1
        [break;]
      case value2:
        //Statements executed when the result of expression matches value2
        [break;]
      ...
      case valueN:
        //Statements executed when the result of expression matches valueN
        [break;]
      [default:
        //Statements executed when none of the values match the value of the expression
        [break;]]
    }

    expression一个用来与 case 子语句匹配的表达式。case valueN可选用于匹配expression的case子句。如果expression与给定的valueN相匹配,则执行该 case 子句中的语句直到该switch语句结束或遇到一个break。default可选一个default子句;如果给定,这条子句会在expression的值与任一case语句均不匹配时执行。

    描述

    一个 switch 语句首先会计算其 expression 。然后,它将从第一个 case 子句开始直到寻找到一个其表达式值与所输入的 expression 的值所相等的子句(使用严格运算符,===)并将控制权转给该子句,执行相关语句。(如果多个 case 与提供的值匹配,则选择匹配的第一个 case,即使这些 case 彼此间并不相等。)如果没有case子句相匹配,程序则会寻找那个可选的 default 子句,如果找到了,将控制权交给它,执行相关语句。若没有default子句,程序将继续执行直到switch结束。按照惯例,default子句是最后一个子句,不过也不需要这样做。

    可选的break语句确保程序立即从相关的 case 子句中跳出 switch 并接着执行 switch 之后的语句。若break被省略,程序会继续执行switch语句中的下一条语句。

    示例

    使用 switch

    下面的例子中,如果expr计算为 "Bananas",程序就会匹配值为 "Bananas" 的 case 然后执行相关语句。当遇到break时,程序就跳出switch然后执行switch后的语句。若break被省略,值为 "Cherries" 的 case 中的语句就也将被执行。

    switch (expr) {
      case 'Oranges':
        console.log('Oranges are $0.59 a pound.');
        break;
      case 'Apples':
        console.log('Apples are $0.32 a pound.');
        break;
      case 'Bananas':
        console.log('Bananas are $0.48 a pound.');
        break;
      case 'Cherries':
        console.log('Cherries are $3.00 a pound.');
        break;
      case 'Mangoes':
      case 'Papayas':
        console.log('Mangoes and papayas are $2.79 a pound.');
        break;
      default:
        console.log('Sorry, we are out of ' + expr + '.');
    }
    
    console.log("Is there anything else you'd like?");

    如果忘记 break 会怎么样?

    如果你忘记添加break,那么代码将会从值所匹配的 case 语句开始运行,然后持续执行下一个 case 语句而不论值是否匹配。实例如下:

    var foo = 0;
    switch (foo) {
      case -1:
        console.log('negative 1');
        break;
      case 0: // foo is 0 so criteria met here so this block will run
        console.log(0);
        // NOTE: the forgotten break would have been here
      case 1: // no break statement in 'case 0:' so this case will run as well
        console.log(1);
        break; // it encounters this break so will not continue into 'case 2:'
      case 2:
        console.log(2);
        break;
      default:
        console.log('default');
    }

    我能把 default 放到 case 之间吗?

    可以啊!JavaScript 会在它找不到匹配项时跳回到那个 default :

    var foo = 5;
    switch (foo) {
      case 2:
        console.log(2);
        break; // it encounters this break so will not continue into 'default:'
      default:
        console.log('default')
        // fall-through
      case 1:  
        console.log('1');
    }

    即使你把 default 放到其它 case 之上它仍会工作。

    用 Switch 重写多个 If 语句

    如下所示。

    var a = 100;
    var b = NaN;
    switch (true) {
      case isNaN(a) || isNaN(b):
        console.log('NaNNaN');
        break;
      case a === b:
        console.log(0);
        break;
      case a < b:
        console.log(-1);
        break;
      default:
        console.log(1);
    }

    使用多准则 case 的方法

    这个技术来源于此:

    Switch statement multiple cases in JavaScript (Stack Overflow)

    多 case - 单一操作

    这种方法利用这样一个事实:如果 case 语句之下没有 break ,它将继续执行下一个 case 语句,而不管 case 是否符合条件。 请看“如果忘记 break 会怎么样?”部分。

    这是一个单操作顺序的 switch 语句,其中四个不同值的执行结果完全一样。

    var Animal = 'Giraffe';
    switch (Animal) {
      case 'Cow':
      case 'Giraffe':
      case 'Dog':
      case 'Pig':
        console.log('This animal will go on Noah\'s Ark.');
        break;
      case 'Dinosaur':
      default:
        console.log('This animal will not.');
    }

    多 case - 关联操作

    这是一个关联操作顺序的 switch 语句,其中,根据所输入的整数,你会得到不同的输出。这表示它将以你放置 case 语句的顺序遍历,并且不必是数字顺序的。在 JavaScript 中,你甚至可以将字符串定义到这些 case 语句里。

    var foo = 1;
    var output = 'Output: ';
    switch (foo) {
      case 10:
        output += 'So ';
      case 1:
        output += 'What ';
        output += 'Is ';
      case 2:
        output += 'Your ';
      case 3:
        output += 'Name';
      case 4:
        output += '?';
        console.log(output);
        break;
      case 5:
        output += '!';
        console.log(output);
        break;
      default:
        console.log('Please pick a number from 0 to 6!');
    }

    这个例子的输出:

    Value

    Log text

    foo is NaN or not 1, 2, 3, 4, 5 or 10

    Please pick a number from 0 to 6!

    10

    Output: So What Is Your Name?

    1

    Output: What Is Your Name?

    2

    Output: Your Name?

    3

    Output: Name?

    4

    Output: ?

    5

    Output: !

    规范

    Specification

    Status

    Comment

    ECMAScript 3rd Edition (ECMA-262)

    Standard

    Initial definition. Implemented in JavaScript 1.2

    ECMAScript 5.1 (ECMA-262)The definition of 'switch statement' in that specification.

    Standard

    ECMAScript 2015 (6th Edition, ECMA-262)The definition of 'switch statement' in that specification.

    Standard

    ECMAScript Latest Draft (ECMA-262)The definition of 'switch statement' in that specification.

    Living Standard

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    Feature

    Android

    Chrome for Android

    Edge

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

  •   JavaScript 中文开发手册
  •   本文标题:switch (Statements) – JavaScript 中文开发手册 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/javascript/33738.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注