js 10分钟学会隐式转换

末蓝、 2022-04-24 15:56 192阅读 0赞

js中无论是四则运算还是数据判断都有可能用到隐式转换，而有些隐式转换会让你感到疑惑，本篇文章就来学习js隐式转换的套路，也是自己学习的记录。

![期待图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]  
在javascript语言中的数据类型有7种，分别为：  
原始值：boolean，undefined， null，number，string，symbol（es6新增）  
对象值：Object  
各数据类型之间的转换被称为`类型转换`,类型转换也被叫做隐式转换

类型转换之间的处理方法可以看下图

> 注意图中有一个错误，Boolean 转字符串这行结果指的是 true 转字符串的例子，不是说 Boolean、函数、Symblo 转字符串都是 `true`

![js类型转换][js]  
此图出自掘金小册[前端面试之道][Link 1]（侵删）

上图汇总了各类型之前转换后得到的结果  
类型转换出现的地方最常见的便是`四则运算符`和`==`了

**四则运算符**  
加法运算符不同于其他运算符，他有特殊的特点  
当一方为字符串时，另一方就会被转换为字符串

1 + "1" //11
    true + "1" //true1
    [0] + "a" //0a

当+号双方都不是字符串时,则会转化成数字或字符串

true + true //2
    [0] + true //0true

除了加法的运算符以外其他四则运算符，只要其中一方是数字，那么另一方就会被转为数字

**==运算符**

对于`==`运算符来说，如果双方类型不同即会发生类型转换  
假如我们判断x和y是否相等，会有如下的判断流程：

1.  如果`typeof(x)`与`typeof(y)`相同则返回 `x === y` 的结果
2.  如果 x 是`null` 并且 y 是`undefined` 则返回 true
3.  如果 x 是`undefined` 并且 y 是`null` 则返回 true
4.  如果 `typeof(x) == "number"` 并且 `typeof(y) == "string"` 则返回 `x == toNumber(y)`
5.  如果 `typeof(x) == "string"` 并且 `typeof(y) == "number"` 则返回 `toNumber(x) == y`
6.  如果 `typeof(x) == "boolean"` 则返回 `toNumber(x) == y`
7.  如果 `typeof(y) == "boolean"` 则返回 `x == toNumber(y)`
8.  如果 `typeof(x) == "string" or "number" or "symbol"` 并且 `typeof(y) == "object"` 则返回 `x == ToPrimitive(y)` //这里的ToPrimitive是转化为原始类型的意思 例如对象转化为原始类型就为"\[object Object\]"
9.  如果 `typeof(x) == "object"` 并且 `typeof(y) == "string" or "number" or "symbol"` 则返回 `ToPrimitive(x) == y`
10. 返回 false

一个很有趣的现象

var demo = "demo"
    demo == true //?

大家觉得会返回什么？ 结果是`false`，`demo`是为真值呀，为什么不能等于`true`?  
因为进行了隐式转换，将`true`转换为了数字`0`，`"demo" == 0`肯定返回`false`的，就比如下面的`if`判断，大家在写代码的时候，千万不要多此一举的去判断`== true`或者`==false`，除非你要判断是指是布尔类型的

var demo = "demo"
    if(demo){ 
    	console.log("demo1")
    }
    if(demo==true){ 
    	console.log("demo2")
    }

x和y的类型不同就会一直进行类型的转化，直到转化为类型相同或x和y分别为undefined和null时返回最终结果。  
类型转换的测试可以去[这里][Link 2]看

**===运算符**

全等运算符就是判断两者类型和值是否相同，不会进行隐式转换

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]: /images/20220212/8f498f8d52ef4b0095ab817dc4b1f1bf.png
[js]: /images/20220212/2aae13d400cc4c6894b1eb81e010a536.png
[Link 1]: https://juejin.im/book/5bdc715fe51d454e755f75ef
[Link 2]: https://felix-kling.de/js-loose-comparison/