{}+[] = ? 和 []+{} = ? 浅谈JS数据类型转换

参加公司技术嘉年华第一季（前端、服务端）的间隙，陈导问了我一个问题：{}+[] 和 []+{}两个表达式的值分别是什么？根据我的理解我觉得结果应该都是"[object Object]"，但是结果却并不是这样子的（{}+[] = 0  []+{} = '[object Object]'），我就想这不科学呀，一下子颠覆了我所学过的js知识了。于是我决定搞明白这究竟是是什么与原因导致的？

    通过查找资料，发现之所以结果不一样，是因为js解释器把{}当做了代码块语法解析，那么{}+[]就变成+[]，这样的话很容易就解释了上面两个表达式的结果了~

    为什么{}在右边就没有被解释成代码块语法呢？这就要讲到+运算符的用法，+可以做数字的加法和字符串的链接，只要有一个是字符串，另外一个就会数据类型转换成字符串，然后进行拼接操作；都为对象的时候，这种情况下会通过valueOf获取对象的值，如果原始值还是对象的话，会通过toString()方法，转化成字符串。

    下面解释一下{}+[]和[]+{}的执行过程：

    {}+[]，由+运算符的语法可以知道，会从左向右解析，遇到{}被认为是代码块（语法）被忽略，继续就变成了+[]，此时+就不是加法运算符，也不是字符串连接符了，变成了转换数字的运算符了，数组通过valueOf方法获取值还是数组，执行toString方法后变成''空字符串，然后空字符串数据类型转化成数字，就变成了0，也解释了变种{}-[]=-0

    []+{}，从左向右解析，[]被转化成''空字符串，{}通过valueOf方法获取原始值还是对象（注意不能通过{}.valurOf()获取，此时{}会被解析成代码块），通过toString方法结果是'[object Object]'，接下来解释简单的字符串连接问题了，所以结果是'[object Object]'。注：对象的toString和valueOf都不一样，并且可以自定义。

    扩展：由上面的例子，进而讨论一下JS中数据类型转换的问题

    JS的取值特别灵活，会根据上下文语境，对数据进行隐式的转换（当然也可以通过显示的方法，对数据进行类型转换）。一般情况下，这种数据类型转换多用在运算符运算的时候.js的数据分成两大类，原始值和对象，原始值有：null undefined string number boolean，其他都是对象。js引擎提供三种数据类型转换操作：ToPrimitive(),ToNumber(),ToString()。

    toPrimitive()是将值转化成原始值，有两个参数，第一个需要转换的数据，第二个参数是prefferedType（number或者string），处理的顺序是：首先如果是原始值直接返回原始值，其次执行valueOf方法，如果返回原始值直接返回，如果不是，执行toString方法，转化成字符串。Date对象第二个参数是string（如果第二个参数是string的话，函数的处理顺序应该把toString方法提到第二步），其他对象都是number。

第一个参数	是否是原始值	valueOf	toString	备注
new Obeject()	否	Object	'[object Object]'
new Number(1)	否	1	'1'	隐式转换不是对象，可用Object.prototype.isPrototypeOf检测
new Blooean(1)	否	true	'true'	隐式转换不是对象，可用Object.prototype.isPrototypeOf检测
new Date()	否	1395985229639	‘Fri Mar 28 2014 13:40:29 GMT+0800 (中国标准时间)  ’
new Function('console.log(1);')	否	function anonymous() { console.log(1); }	'function anonymous() { console.log(1); }'
...	...	...	...

    toNumber将值转化成数字。原始值转换程数字如下表（对象参照toPrimitive )：

原始值	结果
null	+0
undefined	NAN
123	123
'123'	123
true/false	1/+0

toString将值转化成字符串，原始值转化成字符串如下表（对象参照toPrimitive ）：

原始值	结果
null	'null'
undefined	'undefined'
123	'123'
'123a'	'123a'
true/false	'true'/'false'

上面是对javascript数据类型转换的一点理解，在这里记录一下。

 

参考资料：

http://www.2ality.com/2012/01/object-plus-object.html （原文）

http://www.blublu.me/news/157778/?feed_sn=42&orderby=-id（译文@紫云飞）

《javascript权威指南（第六版）》