本文系统解析 JavaScript 中隐式类型转换的核心机制，涵盖 Boolean、Number 和 String 三种包装类的转换逻辑。重点剖析 valueOf 与 toString 的调用优先级，以及 == 运算符在比较数组、对象时的具体推导过程，帮助开发者理解 NaN、Infinity 等特殊情况及常见面试题背后的原理。
前言
在之前的文章[[js让人诟病的这些feature]]中，曾提出过一个关于类型转换的疑问。
起初我认为这个问题比较简单，只需记住某些特性即可，因此尝试通过穷举法来总结规律。
然而，当发现console.log(Number([])) 的结果为 0，而console.log(Number([1, 2])) 的结果为 NaN 时，这种看似混乱的现象背后必然存在深层逻辑。虽然可以通过死记硬背来应对，但作为一名追求卓越的开发者，有必要探究其根本原因。
console.log({} - {}) // NaN
console.log([] - []) // 0
console.log([] - [1, 2]) // NaN
console.log([] == ![]) // true
console.log({} == {}) // false要理解上述打印结果，关键在于理解Number([])、Number([1, 2])、Number({}) 的值，以及Boolean([]) 返回的结果。以下将逐步展开分析。
一、包装类
Boolean()
Boolean() 转换只有两种结果：true 和 false。
- 结果为 false 的类型通常被称为 falsey（虚值）。这些值在 [[[js让人诟病的这些feature]] 中有所提及，具体包括：
0、null、undefined、false、''（空字符串）、NaN
部分文章将 -0 和 +0 视为两个不同的值，但在 Boolean 转换中它们均被视为 falsey。
上述示例均为原始值转换为原始值的情况。除此之外，其他类型的转换结果均为 true。
如果是引用类型转换为原始值，结果始终为 true。此外，还有一些引用类型可能一时难以列举。
Boolean(/d/)
Boolean(new Error())
console.log(Boolean(Symbol()))扩展
另一种容易混淆的是 typeof 的返回结果，在 Node.js 环境中：
console.log(typeof Date())
console.log(typeof new Date())
console.log(Date()) // Thu Jan 13 202l2 22:29:36 GMT+0800 (中国标准时间)
console.log(new Date()) // 2022-01-13T14:29:36.660ZNumber()
引用类型转换为 Number
Number() 函数是易错点，尤其是引用类型转换为原始类型的过程。理解这一点，就能解释文章开头的例子。
只有掌握了 Number(引用类型) 的规则，才能准确判断引用类型转换为原始类型的结果，否则只能靠猜测，这显然行不通。
- 假设存在如下对象：
const obj = {
toString() {
return 2
},
valueOf() {
return 1
}
}- 使用 Number() 包裹该对象：
console.log(Number(obj))打印结果为 1。有趣的是，
consot obj = {
toString() {
return 2
},
valueOf() {
return {}
}
}
console.log(Number(obj)) // 2当 valueOf 返回值为对象时，打印结果为 2；反之，如果直接返回 String 原始值，则将其转换为 number 类型。
一般来说，valueOf 代表对象的“值”，通常无需特殊处理。例如 [1, 2, 3].valueOf() 直接返回 [1, 2, 3]。
我们可以利用这一特性解决[[让 a == 1 && a == 2 && a == 3 成立]]的问题。
由此可以得出一个规律：当 valueOf 返回引用类型时，会去调用 toString 返回的值。具体来说：
- 如果 valueOf 返回原始值，则对该值进行 Number 包装后返回。
- 如果 valueOf 返回对象，则去调用 toString() 方法。
- 如果 toString() 返回原始值，则对该值进行 Number 包装后返回。
- 如果 toString() 返回的是对象，且该对象是自己重写的，则直接报错。
- 如果不是重写的，则调用 Object.prototype.toString 方法。
这里显然涉及到了[[原型链]]的问题，因此隐式转换并非想象中那么简单。
我们创建的对象通常不会定义这两个方法，因此它们显然继承自 Object。也就是说，我们在研究这个问题时，实际上是在研究Object.prototype.toString.call() 返回的值。
console.log(Object.prototype.tostring.call('123'));
console.log(Object.prototype.toString.call(123));
console.log(object.prototype.tostring.call(true));
console.log(Object.prototype.tostring.call(undefined));
console.log(Object.prototype.tostring.call(null));
console.log(Object.prototype.tostring.call(function){}));
console.log(Object.prototype.toString.call([1,2,3]));
console.log(Object.prototype.tostring.call(ff));打印结果如下：
[object string]
[object Number]
[object Boolean]
[object Undefined]
[object Null]
[object Functionl]
[object Arrayl]
[object objectl]原始类型转换为 Number
console.log(Number(undefined)) // NaN
console.log(Number (null)) // 0
console.log(Number(true)) // 1
console.log(Number (false)) // 0
console.log(Number(NaN)) // NaN
console.1og(Number (Infinity))// Infinity
console.log(Number('') // 0
console.log(Number(' ') // 0
console.log(Number('123')) // 123这部分内容无需过多解释，只需记忆即可。需要注意的是，Number 的值除了常规数字外，还包括 NaN 和 Infinity。
以下混淆点需要特别注意：
console.log((123).toString()) // 123
console.log(undefined.toString()) // 报错
console.log(nul.toString()) // 报错
复制代码undefined 和 null 没有包装类，且本身为基础类型，因此没有其他复杂方法，调用时会报错。
扩展
Arguments 和 document
console.log(Object.toString.call(argument)) // [object Argument]
console.log(Object.toString.call(document)) // [object HTMLDocument]HTMLDocument 是浏览器提供的对象类型。
由此可知 Object.prototype.toString 方法的应用之广，其识别类型的能力远强于 typeof 简陋的返回值。当然，每种方法都有其适用场景。
手写 typeof
typeof 是 JavaScript 引擎内置的，并非语法糖。初看这道面试题时令人困惑，难道要手写 typeof 的引擎代码？或者解释从 JavaScript 第一个版本起 typeof null 返回 object 的原因？
但确实有公司考察这一点，颇具挑战性。查阅网上解析后，发现其核心是利用Object.prototype.toString.call() 返回的结果，进行字符串切割，最后返回单词部分。
这就完了？这似乎是脱裤子放屁，多此一举。
Number 转换非二进制
Number(0xfff) // 4095
Number(070) // 56Number 可以直接识别不同进制的数字并转换为十进制。
parseInt 和 Number 的关系
Number('123abc') // NaN
Number('ad123') // NaN
Number(' 123') // 123而[[parseInt]] 很好地解决了这个问题，它可以视为 Number() 的良好补充。
parseInt('123abc') // 123
parseInt('123asd1') // 123
parseInt('ad123') // NaN
parseInt(' 123') // 123String()
Object.prototype.toString
对于 String() 的使用，依旧沿用 Number() 的例子。
const obj = {
toString() {
return 2
},
valueOf() {
return 1
}
}当触发 String(obj) 时，其行为与 Number() 完全相反。
console.log(String(obj)) // 2直接访问的是 toString() 方法。
const obj = {
toString() {
return {}
},
valueOf() {
return 1
}
}
console.log(String(obj)) // 1但如果 toString() 返回的是引用类型，则去调用 valueOf() 方法。这与 Number() 完全相反，但也符合逻辑。
通过重写 toString() 和 valueOf() 方法来了解内部运行规则是一种很好的方式。
如果不重写，可以使用 Object.prototype.toString.call(对象)，返回值参考 Number() 部分的内容。
console.log(String({})) // [object Object]Array.prototype.toString
这部分记忆无需多言，只需将外层的 [] 去除即可。
console.log(String([1])) // '1'
console.log(String([1, 2])) // '1, 2'
console.log(Array.prototype.toString.call([1])) // '1'
console.log(Array.prototype.toString.call([1, 2])) // '1, 2'二、隐式转换触发规则
前面讨论了显式转换的规律，以下是触发隐式转换的规则。
运算符规则与[[运算符的优先级]]相关，此处不赘述，可自行查阅。
布尔值的隐式转换
当出现判断条件时，会发生隐式转换。
if,
switch,
while,
for(; ;),
&&,
||,
!,
!!,
? : 三元数值的隐式转换
只要具备基础数学知识即可理解，运算符用于数字之间的计算。在 JavaScript 中，基本规则一致。
+ - * % == ~~ & | ~ ^ << <<< 等，包括位运算符、算术运算符。
隐式转换最复杂的情况
== !== >= <= < >
如下示例，也是面试高频题目。除了背诵结果，还需了解得出该结果的过程。
console.log([] == ![]) // true个人觉得隐式转换最复杂的莫过于此例。再复杂也不过是加上优先级。回到这个例子，看似比较的是两个数组或特殊对象，实则不然。解析如下：
- 看到等号（==）比较运算符，应明白等号两边都要转换为 Number 类型。
- 从左到右，Number([])，[] 是引用类型，无法直接获取原始值。
- valueOf 无法获取值，则走
Array.prototype.toString.call([])。从上文可知，它返回的是去掉 [] 后的字符串 ''。 - 此时左边变为 Number('')，因此左边返回 0。
此时题目变为0 == ![]。接下来右边的转换较为简单。
- 在 Boolean() 一节中可知，除了 falsey 外，其他均为 true。而在 ! 的作用下，[] 会进行 Boolean() 转换。
- 此时右边为 true，!true 即为 false。
- Number(false) 的结果为 0。
由上得出 0 == 0 的结果为 true。运用上述知识点可以很好地解析问题，下面的例子更加简单。
console.log({} == {}) // false
console.log({} != {})如果按照同样的分析方式解释：
- 两边都使用 Number() 包裹。
- toString() 后均为 '[object Object]'。
Number('[obejct Object]')为 NaN。- 因此最后转化为
console.log(NaN == NaN)的比较。
NaN 与任何值比较都不相等。
题目不难，但综合了较多知识点。解决这两题后，隐式转换的问题也就基本掌握。
三、特殊情况
最容易记住的是字符串运算符。
console.log(1 + '2' + '2') // '122'
console.log(1 + + '2' + '2') // '32'
console.log('A' - 'B' + '2') // 'NaN2'
console.log('A' - 'B' + 2) // NaNJavaScript 中字符串与任何数据类型相加都会转换为字符串吗？可以这么说，除了处理 symbol 类型直接报错外。
console.log(typeof (+ '2')) // number还有 undefined 和 null 的特殊情况。
console.log(undefined == null) // true
console.log(NaN == NaN) // fasle- NaN 的语义是 not a number，很明显，指的就是不是一个数字。
- NaN 在 typeof 中属于 number 类型，但它与任何数都不相等。
四、工作不要使用
2022 年了，我们只需要了解 == 的运行机制即可。都这个年份了，不需要再重申工作中使用 == 还是 === 的问题了吧。
总结
到此这篇关于 JS 隐式转换的文章就介绍到这了，更多相关 JS 的隐式转换内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！