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

gxyz 發(fā)布于2019-08-22 12:46 / 2384人閱讀

摘要：數(shù)字和解釋因為沒有任何一個操作數(shù)是字符串，將轉(zhuǎn)換為一個數(shù)字做數(shù)字加法運算因為沒有操作數(shù)是對象或字符串，將轉(zhuǎn)換為。結(jié)論以避免潛在的問題，不使用加法運算符處理對象，除非你清楚地使用或方法。

前端學(xué)習(xí)：教程&模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試資源匯總

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

這里不講+轉(zhuǎn)換類型，詳見第四章運算符詳解

本職工作：加法運算符

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

關(guān)于運算符的學(xué)習(xí)可參考：運算符詳解

勝任工作：連接字符串

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

JavaScript允許我們在object、array、null or undefined上使用操作符。那我們來看看使用的規(guī)則和細節(jié)。

轉(zhuǎn)換規(guī)則

operand + operand = result

如果操作數(shù)中有一個是對象，它會被轉(zhuǎn)換為原始值(string、number or boolean)

如果操作數(shù)中有一個是字符串，第二個操作數(shù)將轉(zhuǎn)換成字符串，并且連接在一起轉(zhuǎn)換為字符串

在其它情況之下，兩個操作數(shù)轉(zhuǎn)換為數(shù)字并執(zhí)行加法運算

如果兩個運算數(shù)是原始類型，則檢查如果至少一個操作數(shù)是字符串的話，就把它們當(dāng)字符串連接。在其他情況下，它會把他們都當(dāng)數(shù)字，然后轉(zhuǎn)化為數(shù)字相加的總和。

對象轉(zhuǎn)換規(guī)則

如果對象類型是一個Date，使用toString()方法

在其它情況下使用valueOf()方法，返回一個原始值

如果valueOf()方法不能返回一個原始值，使用toString()方法。大多情況都會發(fā)生這種情況

當(dāng)一個數(shù)組被轉(zhuǎn)換為原始值，JavaScript會使用join(",")方法，例如[1,5,6]的原始值是"1,5,6"。一個普通的JavaScript對象{}的原始值是"[object Object]"

Learning from examples

閱讀實例請參看上面的轉(zhuǎn)換規(guī)則

Example 1: 數(shù)字和字符串

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

解釋：

1 + "5" （第二個操作數(shù)是一個字符串，那么數(shù)字1將會變成字符串"1"）

"1" + "5" （連接字符串）

"15"

第二個操作數(shù)是一個字符串,第一個操作數(shù)把number轉(zhuǎn)換成string類型，然后將它們連接在一起。

Example 2:數(shù)字和數(shù)組

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

解釋：

[1,3,5] + 1 （數(shù)組[1,3,5]轉(zhuǎn)換為原始值為"1,3,5"）

"1,3,5" + 1 （數(shù)字1轉(zhuǎn)換成字符串"1"）

"1,3,5" + "1" （連接字符串）

"1,3,51"

第一個操作數(shù)是數(shù)組，轉(zhuǎn)換為原始值字符串，第二個操作數(shù)是數(shù)字，轉(zhuǎn)換為字符串，然后兩個字符串連接在一起。

Example 3:數(shù)字和布爾值

var result = 10 + true; //11

解釋：

10 + true （布爾值true將轉(zhuǎn)換為數(shù)字1）

10 + 1 （數(shù)字做加法運算）

因為兩個操作數(shù)都不是字符串，布爾值將轉(zhuǎn)換為數(shù)字符，然后作數(shù)字加法運算。

Example 4: 數(shù)字和對象

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

解釋：

15 + {} （第二個操作數(shù)是一個對象，對象轉(zhuǎn)換為字符串"[object Object]"）

15 + "[object Object]" （數(shù)字15轉(zhuǎn)換為字符串"15"）

"15" + "[object Object]" （連接字符串）

"15[object Object]"

第二個操作數(shù)是一個對象，轉(zhuǎn)換為原始值字符串。因為valueOf()方法返回的是對象本身，而不是一個原始值，所以再使用toString()方法，返回一個字符串。

第二個操作數(shù)轉(zhuǎn)換之后是一個字符串，故數(shù)字也將轉(zhuǎn)換為一個字符串，再把字符串連接在一起。

Example 5:數(shù)字和null

var result = 8 + null; // 8

解釋：

8 + null（因為操作數(shù)沒有字符串，null將轉(zhuǎn)換為數(shù)字0）

8 + 0 （兩個數(shù)字做加法運算）

如果操作數(shù)不是對象或字符串時，null會轉(zhuǎn)換為數(shù)字，然后做數(shù)字加法運算。

Example 6:字符串和null

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

解釋：

"queen" + null （因為第一個操作數(shù)是一個字符串，null將轉(zhuǎn)換為一個字符串"null"）

"queen" + "null" （連接字符串）

"queennull"

因為第一個操作數(shù)是一個字符串，所以null將轉(zhuǎn)換為一個字符串"null"，然后兩個把字符串連接在一起。

Example 7: 數(shù)字和undefined

var result = 12 + undefined; // NaN

解釋：

12 + undefined （因為沒有任何一個操作數(shù)是字符串，undefined將轉(zhuǎn)換為一個數(shù)字NaN）

12 + NaN （做數(shù)字加法運算）

NaN

因為沒有操作數(shù)是對象或字符串，undefined將轉(zhuǎn)換為NaN。兩個數(shù)字做加法運算，之所以要做加法，是因為typeof(NaN) == "number"，又因為任何一個數(shù)字和NaN做加法運算，所以等于NaN。

結(jié)論

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

如在實例中看到的，開發(fā)中要明確場景的轉(zhuǎn)換規(guī)則，以防JavaScript給你帶來的驚喜哦。

Have a good coding day!

See the examples in JS Bin

英文原文：JavaScript addition operator in details

MORE延伸幾個表達式

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