2021-12-3 温故而知新-JavaScript隐式转换

 背景：因为一个ts的报错让使用了很久的anyscript 有了危机。故好好温习一下之前的基础。温故而知新，就是这个道理。问渠哪得清如许，唯有源头活水来～

 

一 数学运算符中的类型转换

1. 减、乘、除

对所有非Number类型运行数学运算符（减、乘、除）时，会先将非Number 类型转换成Number类型。

⚠️： true:1; false:0; null :0; undefined：NaN

(1) 如果是字符串数字，进行减、乘、除的时候，会拿字符串中的数字进行 - 、*、/ 操作。

'5' - 2 //result: 3

['5'] - 2 // result:3

(2)如果是字符串非数字，进行减、乘、除的时候，会先转换成NaN

'a' - 2 // NaN

2.特殊的加法

⚠️: 因为javascript 中的 + 可以用来拼接字符串；所以加法有所区分。

(1) 优先级最高：如果一边是String类型的话，就应用为字符串拼接，另一边转换成字符串类型进行拼接，输出结果。

例如：'123'+3 //result: '1233'

(2)优先级中：如果一边是Number，另一边是 JS原始类型 的话，将原始类型转换成Number类型，输出结果。

例如：23 + undefined // NaN ,因为undefined转换成数字是NaN；23 + Null // 23 ,因为Null转化成数字是0；

(3)优先级最低：如果一边是Number，另一边是 JS引用类型 的话，将引用类型和Number类型转换成字符串后拼接。

例如：3+[23,4,5,7] // '323,4,5,7' ;

3+{} // '3[object Object]';

3+ Function // '3function Function() { [native code] }'

二、逻辑语句中的类型转换

当使用if、while、for语句，期待表达式是一个Boolean，所以会伴随着隐式类型转换。

1.单个变量

⚠️：如果只有单个变量，会先将变量转换为Boolean值。

 {} 、[] //是true
null、undefined、''、NaN、0、false //是false

例如：

if({}){
        console.log('1')
     }else{ 
        console.log('2') 
} //result: 1

2.使用 == 比较中的5条规则

⚠️： 该用三等号还是老老实实用，但是 == 也要知道

根据==两侧的数据结构，总结出5条规则：

（1）NaN和任何类型包括自己都返回false

NaN == NaN // false

tips:也就是说，他和谁都不合，独立怪！

（2）Boolean 和其他类型比较，都先转换成Number类型。如果是true就是1，false就是0

true == 1  // true
true == '2'  // false, 先把 true 变成 1，而不是把 '2' 变成 true
true == ['1']  // true, 先把 true 变成 1， ['1']拆箱成 '1', 再参考规则3
true == ['2']  // false, 同上
undefined == false // false ，首先 false 变成 0，然后参考规则4
null == false // false，同上

（3）String 和Number比较，先将String转换为Number类型

123 == '123' // true, '123' 会先变成 123
'' == 0 // true, '' 会首先变成 0   从第一个大规则---单个变量可以知道'' 是false（false是0，与0 ==，就是true）

（4）null ==undefined 比较结果是true，除此之外，null、undefined 和其他所有结果比较都是false。

null == undefined // true
null == '' // false
null == 0 // false
null == false // false
undefined == '' // false
undefined == 0 // false
undefined == false // false

（5）原始类型和引用类型做比较时，引用类型会依照 Toprimitive 规则转换为原始类型。

Toprimitive规则，是引用类型向原始类型转变的规则，它遵循先ValueOf后ToString的模式期望得到一个原始类型。

'[object Object]' == {}
// true, 对象和字符串比较，对象通过 toString 得到一个基本类型值
'1,2,3' == [1, 2, 3]
// true, 同上  [1, 2, 3]通过 toString 得到一个基本类型值

三 练习

1. [ ] == ![ ]

result：true

why:

- 第一步，![] 会变成 false
	- 第二步，应用 规则2 ，题目变成： [] == 0
	- 第三步，应用 规则5 ，[]的valueOf是0，题目变成： 0 == 0
	- 所以， 答案是 true ！//

2.[undefined] ==false

result：true

why:

	- 第一步，应用 规则5 ，[undefined]通过toString变成 '',
	  题目变成  '' == false
	- 第二步，应用 规则2 ，题目变成  '' == 0
	- 第三步，应用 规则3 ，题目变成  0 == 0
	- 所以， 答案是 true ！
	// 但是 if([undefined]) 又是个true！