前端實驗室

加法和你想的不一樣

前面兩條規則都非常簡單,不會有混淆。對於其他情況,我總結了下面兩條規則:

當**有一個運算元是複雜資料類型(對象,陣列)**時,將兩個運算元都轉換為字符串(ToString)相加。
當**有一個運算元是簡單資料類型(true/false, null,undefined)**時,同時不存在複雜資料類型和字符串,則將兩個運算元都轉換成數值(ToNumber)相加。
另外還有一種特殊情況 + 頭的相加式,有些瀏覽器會將視為一個塊符號,所以不會參與相加,而是把+符號視為轉換符(Number)將後面的運算元轉換為數值。

我們來看看這幾道題

1.[] + {}

根據規則,[] 和都是複雜資料類型,滿足有一個運算符是複雜資料類型, 所以將兩個值都轉換為字符串,調用其 toString 方法,得到:

"" + "[object Object]" = "[object Object]"

2.1+{}

同樣滿足第三條規則,結果為

"1" + "[object Object]" = "1[object Object]"

3.'1' + false

其中 false 滿足第 4 條規則,但同時滿足第 2 條規則'1'是字符串,優先處理第 2 條規則。所以處理結果應該是將 false 轉為字符串

"1" + "false" = "1false"

看看題目中的 {} + []

按規則計算結果應該是 "[object Object]"

但是控制台打印出來的結果卻是0,別忘了第 5 條,當+開頭的時候,並不參與計算,只是被單做一個空的代碼塊,所以{}+[]實際上是+[], 即Number([]) => Number("") => 0

那麼{}+{}就是+{},等於Number({}) => Number("[object Object]") => NaN 然而我們看到結果再次出乎我們的意料,控制台輸出的是 [object Object][object Object]

到底是怎麼回事?

原來對於{}+{} 不同瀏覽器會有不同的處理結果,在 chrome 中會輸出"[object Object][object Object]",在 firefox 會輸出NaN。這應該是不同瀏覽器的 js 引擎解析差異引起的。我們只要記住這個特殊情況就行了。

其實這些特殊值的計算我們平時都很少接觸到,也沒有多大的意義。關鍵還是要加深對 JS 中對數值轉換的理解,以不變應萬變。到真正遇到問題的時候,不至於摸不著頭腦。