溫故js系列（17）-詳解加法運(yùn)算符

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

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

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

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

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

本職工作：加法運(yùn)算符

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

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

勝任工作：連接字符串

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

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

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

operand + operand = result

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

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

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

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

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

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

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

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

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

Learning from examples

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

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

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

解釋：

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

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

"15"

第二個(gè)操作數(shù)是一個(gè)字符串,第一個(gè)操作數(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"

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

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

var result = 10 + true; //11

解釋：

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

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

因?yàn)閮蓚€(gè)操作數(shù)都不是字符串，布爾值將轉(zhuǎn)換為數(shù)字符，然后作數(shù)字加法運(yùn)算。

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

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

解釋：

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

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

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

"15[object Object]"

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

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

Example 5:數(shù)字和null

var result = 8 + null; // 8

解釋：

8 + null（因?yàn)椴僮鲾?shù)沒有字符串，null將轉(zhuǎn)換為數(shù)字0）

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

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

Example 6:字符串和null

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

解釋：

"queen" + null （因?yàn)榈谝粋€(gè)操作數(shù)是一個(gè)字符串，null將轉(zhuǎn)換為一個(gè)字符串"null"）

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

"queennull"

因?yàn)榈谝粋€(gè)操作數(shù)是一個(gè)字符串，所以null將轉(zhuǎn)換為一個(gè)字符串"null"，然后兩個(gè)把字符串連接在一起。

Example 7: 數(shù)字和undefined

var result = 12 + undefined; // NaN

解釋：

12 + undefined （因?yàn)闆]有任何一個(gè)操作數(shù)是字符串，undefined將轉(zhuǎn)換為一個(gè)數(shù)字NaN）

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

NaN

因?yàn)闆]有操作數(shù)是對(duì)象或字符串，undefined將轉(zhuǎn)換為NaN。兩個(gè)數(shù)字做加法運(yùn)算，之所以要做加法，是因?yàn)?b>typeof(NaN) == "number"，又因?yàn)槿魏我粋€(gè)數(shù)字和NaN做加法運(yùn)算，所以等于NaN。

結(jié)論

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

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

Have a good coding day!

See the examples in JS Bin

英文原文：JavaScript addition operator in details

MORE延伸幾個(gè)表達(dá)式

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