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