js中神奇的运算

先看一段比较神奇的运算和他的结果：

{}+[]

//0

[]+{}

//"[object Object]"

{}+[] == []+{}

//false

({}+[]) == []+{}

//true

运算结果不一样，很神奇啊。。。

我们来看一下js中对Object和Array直接执行运算时会发生什么。由于数组不是一个基本类型，所以在运算过程中，js会尝试将array或object转化成一个基本类型。

在这个转化中，首先会对Array执行一个valueOf函数，如果返回时是基本类型，那么就调用这个。但是对于Array而言，明显这一步做的不够。因为其返回的还是一个数组，这下就需要寻找其他的办法将它进行转化了。

Array.prototype.valueOf.call([‘a‘,‘b‘])

//["a", "b"]

接下来就是toString接手了，toString对Array操作会以字符串的形式返回Array中的内容

Array.prototype.toString.call([])

//""

Array.prototype.toString.call([‘a‘,‘b‘])

//"a,b"

这样就可以解释最上面四条运算中为啥[]+{}会返回“[object
Object]”了。但是对于第一条，居然是返回0，肯定其中还有什么不为人知的东西！

第一条的原理就涉及到了Object定义的方式，在这里Object是以{}的方式，即字面量的方式生成的。但是{还可以在js中意味着块结构的开始。如果{出现在语句的开头，那么js就会认为这是一个块结构，所以就会产生下面这个现象：

{a:1,b:2,c:3}.toString();

// SyntaxError: Unexpected token :

//浏览器实际认为结构：明显语法错误

{

    a:1,

    b:2,

    c:3

};

?.toString();?

这样就能轻松的理解为什么{}+[]会返回0了。同样也会有以下几个等式出现：

{}+1   ===    1;

"[object Object]1" ===  {}+1;

前面两个返回值能理解后，第三条等式也很清楚了，第四条({}+[]) ==
[]+{}为何会返回true，是因为在这里保证了不以{开头，那么js就不会默认为这是一个块结构了，就会开始调用valueOf和toString了，然后两边就相等了。

js中神奇的运算