JS Function - Switch

[jtwang7]

JS Function - switch

参考文章：

• switch-MDN
• switch-菜鸟教程

语法

参数：

• expression：表达式，通常是一个变量。
• value: 匹配项。

switch (expression) {
  case value1:
    // 当 expression 的结果与 value1 匹配时，执行此处语句
    [break;]
  case value2:
    // 当 expression 的结果与 value2 匹配时，执行此处语句
    [break;]
  ...
  case valueN:
    // 当 expression 的结果与 valueN 匹配时，执行此处语句
    [break;]
  [default:
    // 如果 expression 与上面的 value 值都不匹配，执行此处语句
    [break;]]
}

作用

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

执行步骤：

1. 首先设置表达式 n（通常是一个变量）。
2. 计算得到表达式的结果。
3. 随后将表达式的值与结构中的每个 case 的值做比较。
4. 如果存在匹配，则与该 case 关联的代码块会被执行。

• 可选的 break 语句确保程序立即从相关的 case 子句中跳出 switch 并接着执行 switch 之后的语句。若 break 被省略，程序会继续执行 switch 语句中的下一条语句。请使用 break 来阻止代码自动地向下一个 case 运行。
• default 可放置在 switch 内部的任意位置，JavaScript 会在它找不到匹配项时跳回到那个 default。

拓展

多 case 单一操作

原理：
如果 case 语句之下没有 break ，它将继续执行下一个 case 语句，而不管 case 是否符合条件。
效果：
多个 case 语句执行得到同一结果。

switch (expression) {
  case value1:
    // 当 expression 的结果与 value1 匹配时，执行此处语句
  case value2:
    // 上一个 case 没有 break 语句，因此忽略 case value2 并向下执行
  ...
  case valueN:
    // 当 expression 的结果与 valueN 匹配时，执行此处语句
    [break;]
  [default:
    // 如果 expression 与上面的 value 值都不匹配，执行此处语句
    [break;]]
}

例子

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 关联操作

原理：
如果 case 语句之下没有 break ，它将继续执行下一个 case 语句，而不管 case 是否符合条件。
效果：
根据 expression 决定起始 case 子语句，并以放置 case 语句的从当前 case 语句往下顺序遍历。

switch (expression) {
  case value1:
    // 当 expression 的结果与 value1 匹配时，执行此处语句
  case value2:
    // 上一个 case 没有 break 语句，因此忽略 case value2 并向下执行
  ...
  case valueN:
    // 当 expression 的结果与 valueN 匹配时，执行此处语句
    [break;]
  [default:
    // 如果 expression 与上面的 value 值都不匹配，执行此处语句
    [break;]]
}

[jtwang7]

switch 范围判断

参考文献：
js switch语句祥解[范围判断]

前言

switch 常用于多条件的选择，相比于 if...else... 语句更加简洁：

// if ... else ... 语句
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");
}

除了上面提到的 switch 语句的一般用法，switch 语句还可以做一些区间的筛选，即范围判断。

范围判断

function compare(val) {
  switch (true) {
    case (val < 20): 
      ...
      break;
    case (val < 30): 
      ...
      break;
    case (val < 40): 
      ...
      break;
    default: 
      ...
  }
}

要点：
将 switch 的 expression 表达式设为 true

原理：
switch 语句将 expression 表达式的结果与 case 子句的 value 结果进行比较，并选择符合条件的匹配项，执行内部语句。
expression 为表达式，value 也可以为表达式。

• 当 expression 设置为 true 时，本质上是将 value 表达式的结果与 true 比较，逻辑就侧重在 value 表达式的编写上。
• 当 expression 没有设置 true 时，只能用相等 === 匹配 case 子句，逻辑则侧重在 expression 表达式的编写上。