关于javascript:隐式类型转换

"小和山的菜鸟们"，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (xhs-rookies.com)进行学习，及时获取最新文章。

看到隐式类型转换这个词时，很多开发者就曾经头大了。而其转换时的各种猫腻，置信各位开发者们更是饱受其折磨。

接下来，本文会通过对 ECMAScript 官网文档和各大网站高赞文章进行系统性的总结，务必帮忙大家在读完后彻底把握此知识点。

划重点

你只须要搞清楚两个问题就好了！

类型会转换为哪几类？
什么时候该转化为哪类？

数学运算符中的类型转换

家喻户晓，在 JS 中并没有类型申明，所以任意两个变量或字面量，都能够做加减乘除。

1.减、乘、除

咱们在对各种非Number类型进行数学运算时（- * / ）时，会先将非Number类型转换为Number类型。

1 - fasle // 1, 首先将 false 转换为数字 0 , 而后再执行 1 - 0null / 1 // 0, 首先将 null  转换为数字 0 , 而后再执行 0 / 11 * undefined // NaN, undefined 转换为数字是NaN

2.加法的特殊性

谨记三条规定（优先级从高到低）：

当一侧为String类型，被辨认为字符串拼接，并会优先将另一侧转换为字符串类型。
当一侧为Number类型，另一侧为原始类型，则将原始类型转换为Number类型。
当一侧为Number类型，另一侧为援用类型，将援用类型和Number类型转换成字符串后拼接。

1 + '1' // ’11’ （规定1）1 + null // 1 (规定2)1 + true // 2 (规定2)1 + {} // '1[object object]'(规定3)

注: 原始类型（ undefined、null、string、number、boolean、symbol(es6新增) ）

援用类型（Object 、Array 、Date、RegExp 、Function ）统称为Object类型

逻辑语句中的类型转换

当咱们应用 if while for 语句时，咱们冀望表达式是一个 Boolean ，所以肯定随同着隐式类型转换。

1.单个变量

这里有个小 tips：

只有 null undefined '' NaN 0 false 这几个是 false，其余的状况都是 true，比方 {} , []。

2.应用 == 比拟中的 5 条规定

规定 1：NaN 和其余任何类型比拟永远返回 fasle （包含和它本人）
```
NaN == NaN // false
```

规定 2：Boolean 和其余任何类型比拟，Boolean 首先会被转换为 Nmuber 类型

true == 1 // truetrue == '1' // false, 先把 true 变成 1，而不是先把 ‘1’     变成true

规定 3：String和Number比拟，先将String转换为Number类型

1 == '1' // true, '1' 会先变成 1'' == 0 // true, '' 会首先变成 0

规定 4：null == undefined比拟后果是true，除此之外，null、undefined和其余任何后果的比拟值都为false。

null == undefined // truenull == '' // falsenull == 1 // falsenull == false // falseundefined == '' // falseundefined == 1 // falseundefined == false // false

规定 5：原始类型和援用类型做比拟时，援用类型会按照ToPrimitive(可在官网文档第七章节第一大节中找到)规定转换为原始类型
ToPrimitive规定，是援用类型向原始类型转变的规定，遵循先valueOf后toString的模式，冀望失去一个原始类型
```
'[object Object]' == {} // 援用类型通过 toString 失去一个类型'1,2,3,4' == [1, 2, 3, 4] // 同上
```

练练手吧

[ ] == ! [ ]

第一步： ![] 会变为 false
这时，变为 [] == false
第二步：依据规定2，这时Boolean类型会先转换为 0
这时，变为 [] == 0
第三步：依据规定5，这时会调用ToPrimitive规定，[]调用valueOf 返回 [] , 不是原始类型 , 故接着调用
toString , 返回 '' ;
这时，变为 '' == 0
第四步：依据规定3，string转换为number，''转换为0
故为true

[ ] + { }

第一步： [] 调用 toString 返回 ''
第二步： {} 调用 toString 返回 '[object object]'
故最初答案为 'object object'

总结

当初回头看看咱们之前的两个问题

1.最初只会转换为 Boolean 或 Number 或 String

2.两种场景，数据类型和逻辑类型，对应相干规定进行转换

补充：ToPrimitive 规定产生在援用类型转换，通常是先调用 valueOf 办法、后调用 toString 办法、当调用 valueOf 后，若返回不是原始类型，持续调用 toString 办法，若返回还不是原始类型，则报 TypeError。

援用一张图片给大家做一个完满的总结

类型	值	to Boolean	to Number	to String
Boolean	true	true	1	"true"
Boolean	false	false	0	"false"
Number	123	true	123	"123"
Number	Infinity	true	Infinity	"Infinity"
Number	0	false	0	"0"
Number	NaN	false	NaN	"NaN"
String	""	false	0	""
String	"123"	true	123	"123"
String	"123abc"	true	NaN	"123abc"
String	"abc"	true	NaN	"abc"
Null	null	false	0	"null"
Undefined	undefined	false	NaN	"undefined"
Function	function(){}	true	NaN	"function(){}"
Object	{}	true	NaN	"[object Object]"
Array	[]	true	0	""
Array	["abc"]	true	NaN	"abc"
Array	["123"]	true	123	"123"
Array	["123","abc"]	true	NaN	"123,abc"

感激

最初，感激两位博主的文章帮忙，可能站在伟人的肩膀上做一个以期能帮忙大家的总结。

js 隐式装箱-ToPrimitive | {XFE} (sinaad.github.io)

JavaScript 隐式类型转换，一篇就够了！ (freecodecamp.org)

如果您对此文章还有纳闷，请 git 翻阅官网文档

ECMAScript 2015 Language Specification – ECMA-262 6th Edition (ecma-international.org)