{}+[] = ? 和 []+{} = ? 浅谈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权威指南（第六版）》