昨天在网上看到一道面试题，是关于JavaScript中的+元算符的，如下：
[] + 0 = ?
{} + 0 = ?
要解决这道题，我们第一要了解JavaScript中+运算符的行为，+元算符在JavaScript中主要有三种用途：一是用于数字相加，二是用于字符串连接，三是用于类型转换。
1 + 2 = 3 // 数字相加
Hello, + World! = Hello, World! // 字符串连接
+ 1 = 1 // 字符串转换为数字
再回到面试题，可以看出，这并超级规的加法操作，由于运算符两侧的操作数并非都是数字类型，而是包含了数组和对象。难道说是字符串连接吗？不确定，是类型转换？好像也不是。
追本溯源，我们先看看MDN上关于+的运行规则吧：
如果+元算符的操作数包含非基本类型（列如对象，数组等），先将其转换为基本类型(primitive type)。
在JavaScript中，基本类型包括undefined、null、boolean、number、string、BigInt、Symbol。
当+元算符两侧都是基本类型时，执行规则如下：
有一个操作数是字符串时，将另一个操作数也转换为字符串，并执行字符串连接；
有一个操作数是BigInt时，将另一个操作数也转换为BigInt，并执行加法；
否则，将两个操作数都转换为数字，并执行加法。
举几个列子：
1 + `2` = 12 // 满足规则1，将数字1转换为字符串 1 ，执行字符串连接
1 + 2n = 3n // 满足规则2，将数字1转换为
null + true = 1 // 满足规则3，将null转换为数字0，将true转换为数字1，执行加法
注意以上3条规则是按顺序执行的，字符串连接的优先级高于数字加法，所以字符串和数字相加时，永远会转换为字符串连接。
目前来看[] + 0该如何执行，第一[]是数组，不属于基本类型，所以先将它转换为基本类型，对象类型转换为基本类型的操作如下：
调用对象的toPrimitive方法；
如果没有toPrimitive方法，则调用valueOf方法；
如果valueOf方法返回的值不是基本类型，则调用toString方法；
如果toString方法返回的值仍不是基本类型，则抛出错误。
所以[] + 0的执行过程如下：
[]没有toPrimitive方法，所以调用valueOf方法。
valueOf方法返回值依旧是数组对象[]。
接着调用toString方法，返回空字符串 。
因此，[] + 0等价于 + 0, 此时+两侧都是基本类型了，并且满足有一侧是字符串的条件https://www.naquan.com/，所以将另一侧的操作数0也转换为字符串，执行字符串连接，结果为 + 0 = 0 。
再来看{} + 0, {}和[]一样，都是对象类型，所以先将其转换为基本类型。
{}没有toPrimitive方法，所以调用valueOf方法，返回值依旧是对象{}。
接着调用toString方法，返回字符串 [object Object]
然后将 [object Object] 与0进行字符串连接，结果为 [object Object] + 0 = [object Object]0 。
哈哈，但是我要告知你，这个答案是错误的，这个分析是没有问题的，但是JavaScript解释器不同意，当它看到{}时，会将其解释为一个空的代码块，而不是一个空对象，因此，{} + 0实际上等于下面的代码：
{}
+ 0
{}被视为一个空代码块, 没有返回任何结果，而+ 0被解释为一条独立的语句，返回值是0，最终结果是0。
如果要让代码按照我们上面分析的过程执行，那么就要防止JavaScript将{}解释为空代码块，可以用()将其包裹起来。
({}) + 0 // 结果为 [object Object]0
总结
[] + 0 = 0
{} + 0 = 0
说实话这道题目比较偏门，但是对于了解JavaScript中+运算符的行为还是很有协助的，通过一道题，能了解一个知识点，还是很值得的。
有的时候，不要光纠结问题的答案，更应该关注的是问题背后的原理的规则，就列如这道题，在没有写这篇文章之前，如果让我回答，我是答不上来的，我需要查阅资料，了解+运算符的行为规则，才能得出正确的答案。我觉得相比知道答案，更有意思的是分析的过程，这个过程体现了一个程序员处理问题的逻辑思维能力，小到一道面试题，大到一个复杂的系统设计，都是如此。那么如何培养这种能力呢，我也一直在寻找答案…
最后给大家留几道思考题：
[] + [] = ?
{} + [] = ?
[] + {} = ?
{} + {} = ?
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
