[]+{} 和 {}+[]

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

前言

看到标题是不是让你很懵逼，[]+{}和{}+[]就对调了操作数的位置，难道的结果还不一样吗？

 [] + {}    // "[object Object]"
 {} + []    // 0

还真如你所想，就是不一样！为何会得到上面的结果？为何会产生不一样？那我就徐徐道来吧。

[ ] + { } = ?

首先要知道为什么[] + {} == "[object Object]"，这里涉及到JS的隐式类型的转换,主要分为如下步骤：

1. 首先把+号两边的操作数由引用类型数据转为基本类型数据（ToPrimitive 抽象操作）

   • []调用valueOf方法，返回[]不是基本类型数据，于是它转而调用 toString方法转为空字符串""
   • {}调用valueOf方法，返回{}不是基本类型数据，于是它转而调用 toString方法转为字符串"[object Object]"

2. 表达式变为""+"[object Object]"，+ 的其中一个操作数是字符串，则执行字符串拼接
3. 表达式运算结果"[object Object]"

如果对上面的运算细节还有不解，可以先去学习隐式类型的转换

{ } + [ ] = ?

如果用隐式转换的思路去思考{} + []，得到的结果应该也是"[object Object]"，但是这个值和控制台得到的值是不一样。

这也是运算这个表达式最大的误区。先来给个提示+[] == 0 ，这里是不是懂一点了喃，再来把表达式中{}当作一个独立的空代码块，这下是不是就恍然大悟了喃！！

在[] + {}表达式中{}是被当作一个对象的。而在{} + []中，{}被当作了一个独立的空代码块，所有是不参与运算的，表达式就变为+[]。

+[]的运算步骤：

1. 先把[]转为基本类型，和上面一样转为空字符串""
2. 这里+是一元形式，所有会将""转为数字，表达式变为Number("")
3. 得到表达式结果0

如果想让{} + []也计算为"[object Object]"，那么就要让{}代表一个对象，我们可以把表达式变为({})+[]，也是可以达到"[object Object]"的值。

这里主要涉及了JS的表达式和语句知识