详解加法运算符

JavaScript 里面不同的类型做加法之前，需要做各种转换，这里做一个比较完善的总结。

基本转换规则

1. 运算双方存在对象时

   • 如果有一个对象，那么先把它转换成基本类型值

   • 转换之后，如果有字符串，另一个值先转换成字符串，然后再做连接操作

   • 如果没有，把二者转换成数字再相加

2. 如果二者都是基本类型值，先检查是否有字符串类型，如果有就做连接操作；如果没有，就把二者转换成数字相加。

对象转换成基本类型值

• 如果是 Date 对象，那么用toString()

• 其它情况下，用valueOf()

• 其他情况下(valueOf()不存在或者不返回基本类型值)，那么用toString()

举例

数字加字符串

var result = 1 + '5' // 15

二者都是基本类型值，且有字符串，因此做连接操作。

数字加数组

var result = [1, 3, 5] + 1 // "1, 3, 51"

数组是引用类型，先用valueOf()进行转换，但是数组的valueOf()的结果还是原来的数组，所以用toString()方法得到一个字符串"1, 3, 5"；然后是一个字符串加一个数字，做连接操作。

数字加 boolean

var result = 10 + true // 11

二者都是基本类型值，且没有字符串，所以把true转换成数字相加。

数字加对象

var result = 15 + {} // "15[object Object]"

首先对对象做转换，对象的valueOf还是自身，所以用toString()来转换，{}.toString()的结果是"[object Object]",所以最后的结果就是"15[object Object]"。

数字加 null

var result = 8 + null // 8

null 转为0，再做加法运算。

字符串加 null

var result = "queen" + null // "queennull"

数字加 undefined

var result = 12 + undefined // NaN

把undefined转换成数字，得到NaN,因此加法的结果就是NaN。

[] + {}

var result = [] + {} // "[object Object]"

二者都是对象，而且二者的valueOf方法的结果都是自身，所以要调用toString方法。空数组调用的结果是个空字符串，空对象调用的结果是"[object Object]", 字符串连接之后的结果就是"[object Object]"。

{} + []

var result = {} + [] // 0

在这里，{}被解析成一个空的 block,因此实际上解析成这样：

{ // empty block }
+ []

就是把一个空数组转换成数值，调用valueOf之后还是自身，因此调用toString, 得到一个空字符串，转换成数字0。

参考：

• 详解 JavaScript 的加法运算符

• JS中{}+[]和[]+{}的返回值情况是怎样的