Posted on

读《”switch” 语句》总结-2020.05.29

学习时间：2020.05.29

学习章节：“switch” 语句

一、主要知识点

  • switch 的使用方法
  • 可以用于替代多个 if 判断
  • case 的值需要严格相等，可以通过 break 终止，以及通过 case 分组

switch 语句为多分支选择的情况提供了一个更具描述性的方式。

1. switch 语句

当同层级的 if 语句多的时候，为了代码的可读性，可以选择使用 switch 语句来优化。

1.1 语法

switch 语句有至少一个 case 代码块和一个可选的 default 代码块。当 case 的值与输入 x 严格相等的时候，执行 case 下的代码块。遇到最近的 break 或执行到 switch 语句末尾终止。如果没有匹配的 case，则执行 default 代码块（如果 default 存在）。

1
2
3
4
5
6
7
8
9
10
11
12
13
switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

1.2 switch 语句特性

1. 缺失 break，会继续往下执行

1
2
3
4
5
6
7
8
9
10
11
12
let a = 4

switch (a) {
  case 3:
    console.log( 'qhw' );
  case 4:
    console.log( 'qhw1' );
  case 4:
    console.log( 'qhw2' );
  default:
    console.log( 'qhw3' );
}

上面代码会弹出 3 次，分别打印 qhw1、qhw2、qhw3

WX20200531-102956@2x

2. switch/case 参数接受表达式

1
2
3
4
5
6
7
8
9
10
11
let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    console.log("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    console.log("this doesn't run");
}

3. case 分组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let a = 3;

switch (a) {
  case 4:
    console.log('qhw1');
    break;

  case 3: // (*) 下面这两个 case 被分在一组
  case 5:
    console.log('qhw2');
    console.log("qhw3");
    break;

  default:
    console.log('qhw4');
}

共享同一段代码的几个 case 分支可以被分为一组，当 a 为 3 或 5 的时候，都会执行，输出 qhw2、qhw3。

二、知识点拓展

1. == 的比较

1.1 不同类型值之间比较规则：

不同类型值比较之间，会先对值的类型做转换。

WX20190716-123325@2x

toNumber

WX20190716-124539@2x

toPrimitive

WX20190716-124547@2x

可以通过一个简单的例子来验证 toPrimitive。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var obj = {};
var num = 1; 
obj.toString = function(){
  console.log('call toString')
  return {}
}

obj.valueOf = function(){
  console.log('call valueOf')
  return {}
}

console.log(obj == num);
// 输出 
// call valueOf
// call toString
// Script snippet %237:13 Uncaught TypeError: Cannot convert object to primitive value

1.2 相同类型值之间的比较规则：

只是比较值是否相等，没有类型转换。

2. 引用类型之间的比较

2.1 数组比较

1
2
3
4
5
[] == ![] // true
//1. !…优先级高，转换为  [] == false
//2. 布尔值与任何类型比较，布尔值转换为数值，转换为 [] == 0
//3. 对象跟数值比较，对象调用toString()返回原始值，转换为 "" == 0
//4. 字符串跟数值比较，转为数值，转换为 0 == 0

2.2 对象比较

1
2
3
4
5
{} == !{} //false
//1. !…优先级高，转换为  {} == false
//2. 布尔值与任何类型比较，布尔值转换为数值，转换为 {} == 0
//3. 对象跟数值比较，对象调用toString()返回原始值，转换为 "[object Object]" == 0
//4. 字符串与数值比较，字符串转换为数值，转换为	NaN == 0