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