資訊專欄INFORMATION COLUMN
摘要：數字和解釋因為沒有任何一個操作數是字符串，將轉換為一個數字做數字加法運算因為沒有操作數是對象或字符串，將轉換為。結論以避免潛在的問題，不使用加法運算符處理對象，除非你清楚地使用或方法。
前端學習：教程&模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/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:數字和nullvar result = 8 + null; // 8
解釋：
8 + null（因為操作數沒有字符串，null將轉換為數字0）
8 + 0 （兩個數字做加法運算）
8
如果操作數不是對象或字符串時，null會轉換為數字，然后做數字加法運算。
Example 6:字符串和nullvar result = "queen" + null; // "queennull"
解釋：
"queen" + null （因為第一個操作數是一個字符串，null將轉換為一個字符串"null"）
"queen" + "null" （連接字符串）
"queennull"
因為第一個操作數是一個字符串，所以null將轉換為一個字符串"null"，然后兩個把字符串連接在一起。
Example 7: 數字和undefinedvar 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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92353.html
摘要：一元運算符一元運算符只能操作一個值。邏輯非邏輯非參考數據判斷邏輯非運算符可以用于任何值。無論這個值是什么數據類型，這個運算符都會返回一個布爾值。 前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：運算符 JavaScript-運算符 JavaScript 有一系列操作數據值的運算符，運算符按照特定運算規則對...
摘要：甚至包括原型鏈上的所有可枚舉的屬性顯然，我們習慣的數組遍歷的結果是只有這樣的結果的。當代碼運行到語句時，執行上下文的作用域鏈臨時被改變了。 前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：流程控制 JavaScript-流程控制 JavaScript是單線程的，一個語句一個語句的執行。語句是執行過程中的流...
摘要：茶余飯后，來杯咖啡對數組的每個元素調用定義的回調函數并返回包含結果的數組。因此，題目等同于最終返回。但是的次方計算出的結果由于精度問題使得失效。，返回，執行會強制將轉換為，，最終返回。我們可能理解為，該函數存儲的是嵌套函數創建時變量的值。 前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：30題_解析 Ja...
摘要：創建數組數組字面量數組構造函數參數為數組建議使用數組字面量方式，性能好，代碼少，簡潔，畢竟代碼少。數組判斷方法用來判斷某個值是否為。的這是最簡潔最直接的遍歷數組元素的語法。把數組轉換為本地數組，并返回結果。 前端學習：前端教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：數組&數組方法使用詳解 Array對象 之前一...
摘要：對象創建字面量方式構造函數方式也可以這樣不過這樣的話，為何不選擇字面量方式字面量方式和方式的寫法是等價的，返回的結果是同種類的對象。構造函數產生實例時，實例通過其對應原型對象的訪問對應的構造函數對象。 前端學習：教程&模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試資源匯總 歡迎提issues斧正：對象&對象使用 Object對象 在 JavaScript 中，對...
閱讀 1821·2021-10-09 09:44
閱讀 2694·2021-09-22 15:38
閱讀 2459·2021-09-09 09:33
閱讀 692·2021-09-07 09:58
閱讀 1791·2021-09-02 15:41
閱讀 2500·2019-08-30 15:55
閱讀 1798·2019-08-30 15:55
閱讀 541·2019-08-30 15:44
