溫故js系列（17）-詳解加法運算符

前端學習：教程&模塊化/規範化/工程化/優化&工具/調試&值得關注的博客/Git&面試資源彙總

JavaScript一路走來，備受爭議，與其說它備受爭議，不如說它不夠完美。不夠完美？那完美了還得了，它的強大你還沒體會到嗎？它是如此的靈活，固然隨之而來的即是開發的代價，它不像強類型語言那樣規規矩矩，今天就說說這個加法運算符。固然，這個不是以前的溫故，不是我說，隨意翻譯，順便分享，後附原文。

這裏不講+轉換類型，詳見第四章運算符詳解

本職工做：加法運算符

var result = 10 + 5;  
// number + number = number (addition)
// 15

關於運算符的學習可參考：運算符詳解

勝任工做：鏈接字符串

var result = "Hello, " + "World!";  
// string + string = string (concatenation)
// "Hello, World!"

JavaScript容許咱們在object、array、null or undefined上使用操做符。那咱們來看看使用的規則和細節。

轉換規則

operand + operand = result

• 若是操做數中有一個是對象，它會被轉換爲原始值(string、number or boolean)
• 若是操做數中有一個是字符串，第二個操做數將轉換成字符串，而且鏈接在一塊兒轉換爲字符串
• 在其它狀況之下，兩個操做數轉換爲數字並執行加法運算

若是兩個運算數是原始類型，則檢查若是至少一個操做數是字符串的話，就把它們當字符串鏈接。在其餘狀況下，它會把他們都當數字，而後轉化爲數字相加的總和。

對象轉換規則

• 若是對象類型是一個Date，使用toString()方法
• 在其它狀況下使用valueOf()方法，返回一個原始值
• 若是valueOf()方法不能返回一個原始值，使用toString()方法。大多狀況都會發生這種狀況

當一個數組被轉換爲原始值，JavaScript會使用join(',')方法，例如[1,5,6]的原始值是"1,5,6"。一個普通的JavaScript對象{}的原始值是"[object Object]"

Learning from examples

閱讀實例請參看上面的轉換規則

Example 1: 數字和字符串

var result = 1 + "5"; // "15"

解釋：

• 1 + "5" （第二個操做數是一個字符串，那麼數字1將會變成字符串"1"）
• "1" + "5" （鏈接字符串）
• "15"

第二個操做數是一個字符串,第一個操做數把number轉換成string類型，而後將它們鏈接在一塊兒。

Example 2:數字和數組

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

解釋：

• [1,3,5] + 1 （數組[1,3,5]轉換爲原始值爲"1,3,5"）
• "1,3,5" + 1 （數字1轉換成字符串"1"）
• "1,3,5" + "1" （鏈接字符串）
• "1,3,51"

第一個操做數是數組，轉換爲原始值字符串，第二個操做數是數字，轉換爲字符串，而後兩個字符串鏈接在一塊兒。

Example 3:數字和布爾值

var result = 10 + true; //11

解釋：

• 10 + true （布爾值true將轉換爲數字1）
• 10 + 1 （數字作加法運算）
• 11

由於兩個操做數都不是字符串，布爾值將轉換爲數字符，而後做數字加法運算。

Example 4: 數字和對象

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

解釋：

• 15 + {} （第二個操做數是一個對象，對象轉換爲字符串"[object Object]"）
• 15 + "[object Object]" （數字15轉換爲字符串"15"）
• "15" + "[object Object]" （鏈接字符串）
• "15[object Object]"

第二個操做數是一個對象，轉換爲原始值字符串。由於valueOf()方法返回的是對象自己，而不是一個原始值，因此再使用toString()方法，返回一個字符串。

第二個操做數轉換以後是一個字符串，故數字也將轉換爲一個字符串，再把字符串鏈接在一塊兒。

Example 5:數字和null

var result = 8 + null; // 8

解釋：

• 8 + null（由於操做數沒有字符串，null將轉換爲數字0）
• 8 + 0 （兩個數字作加法運算）
• 8

若是操做數不是對象或字符串時，null會轉換爲數字，而後作數字加法運算。

Example 6:字符串和null

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

解釋：

• "queen" + null （由於第一個操做數是一個字符串，null將轉換爲一個字符串"null"）
• "queen" + "null" （鏈接字符串）
• "queennull"

由於第一個操做數是一個字符串，因此null將轉換爲一個字符串"null"，而後兩個把字符串鏈接在一塊兒。

Example 7: 數字和undefined

var result = 12 + undefined; // NaN

解釋：

• 12 + undefined （由於沒有任何一個操做數是字符串，undefined將轉換爲一個數字NaN）
• 12 + NaN （作數字加法運算）
• NaN

由於沒有操做數是對象或字符串，undefined將轉換爲NaN。兩個數字作加法運算，之因此要作加法，是由於typeof(NaN) == "number"，又由於任何一個數字和NaN作加法運算，因此等於NaN。

結論

以免潛在的問題，不使用加法運算符處理對象，除非你清楚地使用toString()或valueOf()方法。

如在實例中看到的，開發中要明確場景的轉換規則，以防JavaScript給你帶來的驚喜哦。

Have a good coding day!

See the examples in JS Bin

英文原文：JavaScript addition operator in details

MORE延伸幾個表達式

[] + []; //''
[] + {}; //'[object Object]'
{} + {}; //NaN  firfox下結果
{} + {}; //'[object Object][object Object]' chrome下結果
({} + {}); //'[object Object][object Object]'
{} + []; //0