JavaScript中“+”的圈套

JavaScript中“+”的陷阱

以下运算

{}+{}

?

结果是什么？稍等..

?

先了解下+运算符。JavaScript中运算符 “+” 很简单，有两种意思

?

1，字符串连接

2，数字相加

?

运算时其它值都将转换成这两个类型。

?

?

JavaScript中有基本类型（undefined, null, booleans, numbers, strings）、对象类型（objects, arrays）和函数类型（functions）。

?

类型转换时先将对象/函数类型转换成基本类型。然后在根据运算符“+”转成字符串或数字。

?

其它基本类型转成数字 有如下规则

Number(undefined) // NaN
Number(null)      // 0
Number(true)      // 1
Number(false)     // 0
Number('1')       // 1

?

其它基本类型转成字符串 有如下规则

String(undefined) // "undefined"
String(null)      // "null"
String(true)      // "true"
String(false)     // "false"
String(1)         // "1"

?

?

回到上面的题目 ： {}+{}

?

1，先将两个对象直接量转成基本类型，{}的valueOf()还是自己。如下

var obj = {};
obj.valueOf() === obj; // true

?

2，转成字符串，{}的toString()是“[object Object]”

?

最后两个字符串连接的结果是“[object Object][object Object]”。

?

?

结果真是这个吗？在浏览器的控制台中测试不是，是NaN。

?

?

真让人匪夷所思，前面一路推理下来最后竟然不对。

其实原因是第一个{}并非表示对象直接量，而是语句块的意思。参考：Javascript中大括号“{}”的多义性

?

即第一个大括号是语句块，该语句块中没有任何执行语句，可以忽略。演变是这样的

?

1 {}+{}

2 +{}

3 +"[object Object]"

4 NaN

?

?

恍然大悟了，加个小括号强制将第一个大括号转成对象直接量 。结果就是期望的了。如

({}+{})

?

这时将输出

?

?

补充：node环境中 {}+{} 输出的是“[object Object][object Object]” 却不是 NaN

相关：JavaScript中“+”的陷阱（续）