带你玩转JavaScript中的隐式强制类型转换

Posted 2020-09-13

正题开始前我想先抛出一个问题，==和===有什么区别？可能一般人会想，不就是后者除了比较值相等之外还会比较类型是否相等嘛，有什么好问的，谁不知道？！但是这样说还不够准确，两者的真正区别其实是==在比较的时候允许做强制类型转换，而===不允许。好了终于引出了今天的重点，我们平时肯定遇到过强制类型转换的时候，死活想不通为什么要这样转换（为什么这两个相等）的情况。那么下面我就以==为例，来说明一下其中强制类型转换的规则。

前提知识

javascript中的6大类型：undefined、null、boolean、string、number、object

其中又分为：原始类型(Primitive) 和 对象类型(Object)

JavaScript中的假值：undefined、null、false、+0、-0、NaN和" "

1.字符串和数字相等比较

25 == "25"  //true

第一种情况比较简单，当字符串和数字之间相等比较的时候，都会先将字符串强制转换成数字再比较

2.其他类型和布尔类型相等比较

"25" == false //false
"0" == false  //true 

第二种情况,当其他类型和布尔类型相等比较的时候，都会先将布尔类型强制转换为数字再比较。

右边的false强制转换为数字结果是0，然后再运用上面第一条规则，"0"强制转换为0，所以"0" == false返回的结果是true

3.对象和非对象相等比较

"abc" == Object("abc");  //true
null == Object(null);  //false
undefined == Object(undefined);  //false
NaN == Object(NaN);  //false

第三种情况，如果是对象（对象、函数、数组）和非对象之间相等比较时，会进行ToPrimitive操作（转换为原始类型）。

什么是ToPrimitive操作呢，其实ToPrimitive操作就是先执行valueOf()方法，如果结果为原始值，则返回此结果；否则，执行toString()方法，如果结果是原始值，则返回此结果；否则，抛出TypeError错误。

拿上面的第一个为例，Object("abc")执行ToPrimitive操作后，返回了"abc"原始值，所以结果为true。

Object(null)和Object(undefined)执行完ToPrimitive操作后和Object()是一样的，所以结果为false。

最后一个结果为false，是因为NaN不等于NaN。

特殊情况

还有一种特殊情况，null == undefined（别问我为什么，这个是规定）

小检验

false == "";
false == [];
"" == 0;
"" == [];
0 == [];
"" == [null];

看了之前的分析，检验一下吧，看看上面几个应该是true还是false呢？

总结

其实总结下来就三个口诀：

1.字符串类型和数字类型相等比较，字符串强转数字，再比较。

2.其他类型和布尔类型相等比较，布尔类型强转数字，再比较。

3.对象和非对象相等比较，执行ToPrimitive()操作，再比较。

有了这三个口诀（知道了转换原理），我相信任何情况我们都不再懵逼了。

写在最后

有一年没有更新博客了，回想一下，一是因为公司业务缠身，二是因为去年经历一些事情打击了我，其实这些也都是借口吧，最近看到强制类型转换这个方面有点绕，正好跟大家分享一下，希望之后能够坚持吧，多分享一些东西，对自己也是一种督促与进步吧。

最后感谢大家的阅读，有什么分析的不对的地方欢迎大家批评指出，如果喜欢本文，请点击右下角的推荐哦~