谈谈JS中的 {} + [] 和 [] + {}

版权声明：欢迎转载，但请注明出处 https://blog.csdn.net/HaoDaWang/article/details/81319191

谈谈JS中的 {} + [] 和 [] + {}

先谈谈为什么会有这种问题，这是因为js的弱类型导致的，js的弱类型，导致js的隐式类型转换频繁。比如像标题中的{} + []，[] + {}，你完全不能去预测它的类型。

先来看一条在js里的隐式的rule，js在进行加法运算的时候， 会先推测两个操作数是不是number。
如果是，则直接相加得出结果。
如果其中有一个操作数为string，则将另一个操作数隐式的转换为string，然后进行字符串拼接得出结果。
如果操作数为对象或者是数组这种复杂的数据类型，那么就将两个操作数都转换为字符串，进行拼接
如果操作数是像boolean这种的简单数据类型，那么就将操作数转换为number相加得出结果

知道了这些规则的话就简单多了

先来看第一个[] + {}，这是两个复杂数据结构相加的例子，按照上面的rule，我们先将两个操作数转换为string，然后进行拼接，于是

[] -----> ''
{} -----> '[object Object]'

[] + {} = '[object Object]'

再来看第二个{} + []，这也是两个复杂数据结构相加的例子，看样子与第一个没有什么差别，按理说也应该是[object Object]，但是你相加的时候你会发现， 得出的答案是 0！

这是为什么呢？

原因是有的js解释器会将开头的 {} 看作一个代码块，而不是一个js对象，于是真正参与运算的是+[]，就是将[]转换为number，于是得出答案0

那么我们如何证明{}被看作一个代码块而不是一个js对象呢？很简单， 我们可以在{}里写上一些语句，比如

{console.log("hello")} + [] 
//hello
//0