“小和山的菜鸟们”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (xhs-rookies.com)进行学习，及时获取最新文章。
看到隐式类型转换这个词时，很多开发者就曾经头大了。而其转换时的各种猫腻，置信各位开发者们更是饱受其折磨。
接下来，本文会通过对 ECMAScript 官网文档和各大网站高赞文章进行系统性的总结，务必帮忙大家在读完后彻底把握此知识点。
划重点
你只须要搞清楚两个问题就好了！
- 类型会转换为哪几类？
- 什么时候该转化为哪类？
数学运算符中的类型转换
家喻户晓，在 JS 中并没有类型申明，所以任意两个变量或字面量，都能够做加减乘除。
1.减、乘、除
咱们在对各种非Number类型进行数学运算时（- * / ）时，会先将非Number类型转换为Number类型。
1 - fasle // 1, 首先将 false 转换为数字 0 , 而后再执行 1 - 0
null / 1 // 0, 首先将 null 转换为数字 0 , 而后再执行 0 / 1
1 * undefined // NaN, undefined 转换为数字是NaN2.加法的特殊性
谨记三条规定（优先级从高到低）：
- 当一侧为
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 // true true == '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 // true null == '' // false null == 1 // false null == false // false undefined == '' // false undefined == 1 // false undefined == 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)
发表回复