詳解Js加法運算符

簡介

JavaScript是一門了不起的語言。我喜歡它的靈活性：只需以你喜歡的方式做事：更改變量類型，動態的向對象添加方法或屬性，對不同的變量類型使用運算符等等。

然而動態是要付出代價的，開發人員需要知道怎樣處理對於不同操作符的類型轉換：加號(+)，等號(==和===)，不等號(!=和!==)等等，許多運算符有自己處理類型轉換的方式。

 

加法運算符

最常用的運算符：+，這個運算符用於接連字符串或對數字求和：

字符串連接：

var result = "Hello, " + "World!"; // 字符串 + 字符串 = 字符串 (連接) // "Hello, World!"

數字算術相加：

var result = 10 + 5; // 數字 + 數字 = 數字 (相加) // 15

JavaScript允許使用對象，數組，null或undefined作為操作數。下面試着揭開轉換的一般規則。

 

轉換規則

使用下面的等式看一下在操作運算符里JavaScript是如何進行類型轉換的：

1. 如果至少有一個操作數是對象，會被轉換成原始值（字符串，數字或布爾）；
2. 轉換之后，如果至少有一個操作數是字符串類型，第二個操作數會被轉換成字符串，並且會執行連接。
3. 在其他的情況下，兩個操作數都會轉換成數字並執行算數加法運算。

如果兩個操作數都是原始類型，運算符會檢查是否至少有一個是字符串類型，如果是就執行連接操作。其他情況就都轉換為數字並求合。

 

對象類型轉為原始類型

對象類型向原始類型的轉換

• 如果對象類型是Date，會調用該對象的toString()；
• 其他情況下，如果valueOf()返回的是原始類型，會調用對象的valueOf()；
• 其他情況下（如果valueOf()不存在或沒有返回原始類型），會調用toString()方法，大部分情況下是用的這種轉換。

當數組轉換為原始類型，JavaScript會使用它的join(',')方法，例如[1,5,6]就是"1,5,6"。普通JavaScript對像{}的原始類型是"[object Object]"。

資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

學習例子

下面的例子幫助我們理解簡單和復雜的轉換場景。

例1：數字和字符串

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

解析：

1. 1+"5"(第二個操作數是字符串，基於規則2數字1變"1")
2. "1"+"5"(字符串連接)
3. "15"

第二個操作數是字符串，第一個操作數從數字轉換為字符串，然后進行連接。

例2：數字和數組

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

解析：

1. [1, 3, 5] + 1 (使用規則1，將數組[1, 3, 5]轉換成原始值: "1,3,5")
2. "1,3,5" + 1 (使用規則，將數字1轉換為字符串 "1")
3. "1,3,5" + "1" (字符串連接)
4. "1,3,51"

第1個操作數是數組，所以它被轉換為原始字符串值，在下一步數字操作數轉換為字符串，然后再完成兩個字符串的連接。

例3：數字和布爾類型

var result = 10 + true; //11

解析:

1. 10 + true (基於規則3將布爾值true轉換成數字1)
2. 10 + 1 (將兩個數字求值)
3. 11

因為兩個操作數都不是字符串，布爾值轉換成數字，然后執行算術的求和。

例4:數字和對象

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

解析:

1. "15 + {}" (第二操作數是個對象，應用規則1將對象轉換為原始類型字符串"[object Object]")
2. 15 + "[object Object]" (使用規則2將數字15轉換成字符串 "15")
3. "15" + "[object Object]" (字符串連接)
4. "15[object Object]"

第二個對象操作數轉為字符串值，因為valueOf()方法返回對象本身，它不是原始值，toString() 方法就會被調用並返回字符串，第二個操作數現在是字符串了，因此數字也被轉換為字符串，最后執行兩個字符串的連接。

例5: 數字和null

var result = 8 + null; // 8

解析:

1. 8 + null (因為兩個操作數都不是字符串，基於規則3將null轉為數字0)
2. 8 + 0 (數字相加)
3. 8

因為操作數不是對象也不是字符串，null被轉換成數字，然后計算數字的和。

例6: 字符串和null

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

解析:

1. "queen" + null (因為第一個操作數是字符串，基於規則2將null轉成字符串"null")
2. "queen" + "null" (字符串連接)
3. "queennull"

因為第一個操作數是字符串，null轉成字符串，然后進行字符串連接。

例7:數字和undefined

var result = 12 + undefined; // NaN

解析:

1. 12 + undefined (因為操作數都不是對象或字符串,基於規則3將undefined轉為數字NaN)
2. 12 + NaN (數字相加)
3. NaN

因為操作數都不是對象或字符串，undefined轉為數字：NaN，對數字和NaN進行相加求值等於NaN.