转自:http://www.heyria.com/index.php/2014/01/js-object-plus-object/
当对象或者数组相加的时候,会产生有点意外的结果。
这篇文章主要是解释为什么会产生这种结果。
在JavaScript中加号操作的规则比较简单:只能对Number
或者String
相加,其他的值都会被转化成这两种类型中的一种。为了理解这种转化是怎么工作的,我们首先弄清一些事情,参考ECMA-262v5版本
9.1章节
快速复习下,在JavaScript中有两种值:primitives 跟objects.原始类型的值有: undefined
null
Boolean
Number
String
.其他的所有值都是Object
包括array跟function
1. 值的转换
加号运算符能执行三种转换:把值转化成primitive,数字跟字符串
1.1 通过ToPrimitive() 将值转换成原始类型
ToPrimitive(input,
PreferredType?)
可选参数PreferredType是Number
或者是String
。返回值为任何原始值.如果PreferredType是Number,执行顺序如下:(参考:http://es5.github.io/#x9.1)
- 如果
input
为primitive
,返回 - 否则,
input
为Object
。调用obj.valueOf()
。如果结果是primitive
,返回。 - 否则,调用obj.toString(). 如果结果是
primitive
,返回 - 否则,抛出
TypeError
如果 PreferredType
是String,步骤2跟3互换,如果PreferredType
没有,Date
实例被设置成String
,其他都是Number
1.2通过ToNumber()把值转换成Number
直接看ECMA 9.3的表格http://es5.github.io/#x9.3
- undefined NaN
- null +0
- boolean value true is converted to 1, false is converted to +0
- number value no conversion necessary
- string value parse the number in the string. For example, “324″ is
converted to 324 要注意的是
Object
的转换,首先调用ToPrimitive(obj, Number)
方法,然后调用ToNumber
作为结果。
1.3通过ToString()
把值转化成字符串
直接看ECMA 9.8的表格http://es5.github.io/#x9.8
- undefined “undefined”
- null “null”
- boolean value either “true” or “false”
- number value the number as a string, e.g. “1.765″
- string value no conversion necessary
1.4 试试看
下边的代码可以看到转换过程
var obj = {
valueOf: function () {
console.log("valueOf");
return {}; // not a primitive
},
toString: function () {
console.log("toString");
return {}; // not a primitive
}
}
Number(obj)//把obj转换成Number
//输出如下:
//valueOf 返回的不是原始类型,继续往下走
//toString 返回的不是原始类型,继续往下走
//TypeError: Cannot convert object to primitive value 抛出错误
2. 相加
value1 +
value2
对此表达式求值时,遵循一下步骤(http://es5.github.io/#x11.6.1):
1.转换操作符两边的值为原始值
`prim1 := ToPrimitive(value1)`
`prim2 := ToPrimitive(value2)`
第二个参数PreferredType
被忽略,所以对非Date类型都是Number,Date为String
2.如果prim1或者prim2有一个是String
,把这俩值都转化成String
,返回相连的结果。
3.否则,把prim1跟prim2都转化成Number
返回相加后的结果
2.1 期望的结果
当你对两个数组相加的时候,结果跟预期的一样: [] + [] //
‘‘
转化[]到primitive的时候,首先尝试valueOf()
,返回数组本身(this):
var arr = [];
arr.valueOf() === arr
//true
因为结果不是primitive
,继续调用toString()
,返回空字符串(这个是primitive类型)。因此[]
+ []
的结果是两个空字符串相连接,还是空字符串
数组跟对象相加,也能得到期望的结果:
[] + {}
//‘[object Object]‘
解释:将一个空对象转化为String,有以下结果
String({})
//‘[object Object]‘
所以是空字符串”"跟”[object Object]“的结合
更多例子:
5 + new Number(7)
12
6 + { valueOf: function () { return 2 } }
8
"abc" + { toString: function () { return "def" } }
‘abcdef‘
2.2 意料之外的结果
当空对象跟空对象相加的时候,事情变的有点怪了。。。
{} + {}
NaN
这里肿么了?问题在于JavaScript把第一个{},解析成空的代码块并且忽略它了。NaN
实际上是后边这个+{}
产生的。你在这里看到的加号,并不是二元元素符的那个加号,而是一元运算符,作用是,把值转换为Number
,跟Number()
方法一样,例如:
+"3.65"
3.65
下边的表达式是等价的:
+{}
Number({})
Number({}.toString()) // {}.valueOf() isn’t primitive
Number("[object Object]")
NaN
为什么第一个{}会被解析成代码块呢?因为这段代码被解析成statement
并且{}在这个statement的起始,所以被当成block
statement了。 然后,怎么修复呢–强制解析器把它认为是表达式:
({} + {})
‘[object Object][object Object]‘
function的参数,总是被当成表达式处理:
console.log({} + {})
[object Object][object Object]
经过这么一系列的解释,产生如下结果,你应该不会吃惊了:
{} + []
0
还是因为{}被解析成空代码块了,+[]
返回0,下边这些表达式是等价的:
+[]
Number([])
Number([].toString()) // [].valueOf() isn’t primitive
Number("")
0
有趣的是,Node.js是用的REPL解释器,跟Firefox或者Chrome都不同(即使Node.js用的是跟Chroe一样的V8引擎)。Nodejs中会产生正常的结果:
{} + {}
‘[object Object][object Object]‘
{} + []
‘[object Object]‘
3. 总结下
在绝大多数情况下,理解 +在JavaScript中是怎么工作的,并不难:只能对数字或者字符串相加。对象会被转换成字符串(如果一方是String)或者数字(木有String).如果你想连接数组,你需要使用一个方法:
[1, 2].concat([3, 4])
[ 1, 2, 3, 4 ]
在JavaScript中没有内置的方法可以连接对象。你需要使用一个类似Underscore一样的库:
var o1 = {eeny:1, meeny:2};
var o2 = {miny:3, moe: 4};
_.extend(o1, o2)
{ eeny: 1,
meeny: 2,
miny: 3,
moe: 4 }
注意:跟Array.prototype.concat()
相反,extand()
会修改它的第一个参数:
o1
{ eeny: 1,
meeny: 2,
miny: 3,
moe: 4 }
o2
{ miny: 3, moe: 4 }
翻译自http://www.2ality.com/2012/01/object-plus-object.html