JS的{} + {}與{} + []的結果是什么？

JanWadswort 7年前發布 | 12K 次閱讀 JavaScript開發 JavaScript

在JS中的運算符共同的情況中，(+)符號是很常見的一種，它有以下的使用情況:

數字的加法運算，二元運算
字符串的連接運算，二元運算，最高優先
正號，一元運算，可延伸為強制轉換其他類型的運算元為數字類型

當然，如果考慮多個符號一起使用時，(+=)與(++)又是另外的用途。

另一個常見的是花括號({})，它有兩個用途也很常見:

對象的字面文字定義
區塊語句

所以，要能回答這個問題，要先搞清楚重點是什么？

第一個重點是:

加號(+)運算在JS中在使用上的規定是什么。

第二個重點則是:

對象在JS中是怎么轉換為原始數據類型的值的。

加號運算符(+)

除了上面說明的常見情況外，在標準中轉換的規則還有以下幾個，要注意它的順序:

operand + operand = result

使用 ToPrimitive 運算轉換左與右運算元為原始數據類型值(primitive)
在第1步轉換后，如果有運算元出現原始數據類型是"字符串"類型值時，則另一運算元作強制轉換為字符串，然后作字符串的連接運算(concatenation)
在其他情況時，所有運算元都會轉換為原始數據類型的"數字"類型值，然后作數學的相加運算(addition)

ToPrimitive內部運算

因此，加號運算符只能使用于原始數據類型，那么對于對象類型的值，要如何轉換為原始數據類型？下面說明是如何轉換為原始數據類型的。

在 ECMAScript 6th Edition #7.1.1 ，有一個抽象的 ToPrimitive 運算，它會用于對象轉換為原始數據類型，這個運算不只會用在加號運算符，也會用在關系比較或值相等比較的運算中。下面有關于 ToPrimitive 的說明語法:

ToPrimitive(input, PreferredType?)

input 代表代入的值，而 PreferredType 可以是數字(Number)或字符串(String)其中一種，這會代表"優先的"、"首選的"的要進行轉換到哪一種原始類型，轉換的步驟會依這里的值而有所不同。但如果沒有提供這個值也就是預設情況，則會設置轉換的 hint 值為 "default" 。這個首選的轉換原始類型的指示( hint 值)，是在作內部轉換時由JS視情況自動加上的，一般情況就是預設值。

而在JS的 Object 原型的設計中，都一定會有兩個 valueOf 與 toString 方法，所以這兩個方法在所有對象里面都會有，不過它們在轉換有可能會交換被調用的順序。

當PreferredType為數字(Number)時

當 PreferredType 為數字(Number)時， input 為要被轉換的值，以下是轉換這個 input 值的步驟:

如果 input 是原始數據類型，則直接返回 input 。
否則，如果 input 是個對象時，則調用對象的 valueOf() 方法，如果能得到原始數據類型的值，則返回這個值。
否則，如果 input 是個對象時，調用對象的 toString() 方法，如果能得到原始數據類型的值，則返回這個值。
否則，拋出TypeError錯誤。

當PreferredType為字符串(String)時

上面的步驟2與3對調，如同下面所說:

如果 input 是原始數據類型，則直接返回 input 。
否則，如果 input 是個對象時，調用對象的 toString() 方法，如果能得到原始數據類型的值，則返回這個值。
否則，如果 input 是個對象時，則調用對象的 valueOf() 方法，如果能得到原始數據類型的值，則返回這個值。
否則，拋出TypeError錯誤。

PreferredType沒提供時，也就是hint為"default"時

與 PreferredType 為數字(Number)時的步驟相同。

數字其實是預設的首選類型，也就是說在一般情況下，加號運算中的對象要作轉型時，都是先調用 valueOf 再調用 toString 。

但這有兩個異常，一個是 Date 對象，另一是 Symbol 對象，它們覆蓋了原來的 PreferredType 行為， Date 對象的預設首選類型是字符串(String)。

因此你會看到在一些教程文件上會區分為兩大類對象，一類是 Date 對象，另一類叫非Date(non-date) 對象。因為這兩大類的對象在進行轉換為原始數據類型時，首選類型恰好相反。

模擬代碼說明

以簡單的模擬代碼來說明，加號運算符(+)的運行過程就是像下面這個模擬碼一樣，我想這會很容易理解:

a + b:
    pa = ToPrimitive(a)
    pb = ToPrimitive(b)

    if(pa is string || pb is string)
       return concat(ToString(pa), ToString(pb))
    else
       return add(ToNumber(pa), ToNumber(pb))

步驟簡單來說就是，運算元都用 ToPrimitive 先轉換為原始數據類型，然后其一是字符串時，使用 ToString 強制轉換另一個運算元，然后作字符串連接運算。要不然，就是都使用 ToNumber 強制轉換為數字作加法運算。

而 ToPrimitive 在遇到對象類型時，預設調用方式是先調用 valueOf 再調用 toString ，一般情況數字類型是首選類型。

上面說的 ToString 與 ToNumber 這兩個也是JS內部的抽象運算。

valueOf與toString方法

valueOf 與 ToString 是在Object中的兩個必有的方法，位于Object.prototype上，它是對象要轉為原始數據類型的兩個姐妹方法。從上面的內容已經可以看到， ToPrimitive 這個抽象的內部運算，會依照設置的首選的類型，決定要先后調用 valueOf 與 toString 方法的順序，當數字為首選類型時，優先使用 valueOf ，然后再調用 toString 。當字符串為首選類型時，則是相反的順序。預設調用方式則是如數字首選類型一樣，是先調用 valueOf 再調用 toString 。

JS對于Object與Array的設計

在JS中所設計的 Object 純對象類型的 valueOf 與 toString 方法，它們的返回如下:

valueOf 方法返回值: 對象本身。
toString 方法返回值: "[object Object]"字符串值，不同的內建對象的返回值是"[object type]"字符串，"type"指的是對象本身的類型識別，例如Math對象是返回"[object Math]"字符串。但有些內建對象因為覆蓋了這個方法，所以直接調用時不是這種值。(注意: 這個返回字符串的前面的"object"開頭英文是小寫，后面開頭英文是大寫)

你有可能會看過，利用Object中的toString來進行各種不同對象的判斷語法，這在以前JS能用的函數庫或方法不多的年代經常看到，不過它需要配合使用函數中的 call 方法，才能輸出正確的對象類型值，例如:

> Object.prototype.toString.call([])
"[object Array]"

> Object.prototype.toString.call(new Date)
"[object Date]"

所以，從上面的內容就可以知道，下面的這段代碼的結果會是調用到 toString 方法(因為 valueOf 方法的返回并不是原始的數據類型):

> 1 + {}
"1[object Object]"

一元正號(+)，具有讓首選類型(也就是hint)設置為數字(Number)的功能，所以可以強制讓對象轉為數字類型，一般的對象會轉為:

> +{} //相當于 +"[object Object]"
NaN

當然，對象的這兩個方法都可以被覆蓋，你可以用下面的代碼來觀察這兩個方法的運行順序，下面這個都是先調用 valueOf 的情況:

let obj = {
  valueOf: function () {
      console.log('valueOf');
      return {}; // object
  },
  toString: function () {
      console.log('toString');
      return 'obj'; // string
  }
}
console.log(1 + obj);  //valueOf -> toString -> '1obj'
console.log(+obj); //valueOf -> toString -> NaN
console.log('' + obj); //valueOf -> toString -> 'obj'

先調用 toString 的情況比較少見，大概只有 Date 對象或強制要轉換為字符串時才會看到:

let obj = {
  valueOf: function () {
      console.log('valueOf');
      return 1; // number
  },
  toString: function () {
      console.log('toString');
      return {}; // object
  }
}
alert(obj); //toString -> valueOf -> alert("1");
String(obj); //toString -> valueOf -> "1";

而下面這個例子會造成錯誤，因為不論順序是如何都得不到原始數據類型的值，錯誤消息是"TypeError: Cannot convert object to primitive value"，從這個消息中很明白的告訴你，它這里面會需要轉換對象到原始數據類型:

let obj = {
  valueOf: function () {
      console.log('valueOf');
      return {}; // object
  },
  toString: function () {
      console.log('toString');
      return {}; // string
  }
}

console.log(obj + obj);  //valueOf -> toString -> error!

Array(數組)很常用到，雖然它是個對象類型，但它與Object的設計不同，它的 toString 有覆蓋，說明一下數組的 valueOf 與 toString 的兩個方法的返回值:

valueOf 方法返回值: 對象本身。(與Object一樣)
toString 方法返回值: 相當于用數組值調用 join(',') 所返回的字符串。也就是 [1,2,3].toString() 會是 "1,2,3" ，這點要特別注意。

Function對象很少會用到，它的 toString 也有被覆蓋，所以并不是Object中的那個 toString ，Function對象的 valueOf 與 toString 的兩個方法的返回值:

valueOf 方法返回值: 對象本身。(與Object一樣)
toString 方法返回值: 函數中包含的代碼轉為字符串值

Number、String、Boolean三個包裝對象

包裝對象是JS為原始數據類型數字、字符串、布爾專門設計的對象，所有的這三種原始數據類型所使用到的屬性與方法，都是在這上面所提供。

包裝對象的 valueOf 與 toString 的兩個方法在原型上有經過覆蓋，所以它們的返回值與一般的Object的設計不同:

valueOf 方法返回值: 對應的原始數據類型值
toString 方法返回值: 對應的原始數據類型值，轉換為字符串類型時的字符串值

toString 方法會比較特別，這三個包裝對象里的 toString 的細部說明如下:

Number包裝對象的 toString 方法: 可以有一個傳參，可以決定轉換為字符串時的進位(2、8、16)
String包裝對象的 toString 方法: 與String包裝對象中的 valueOf 相同返回結果
Boolean包裝對象的 toString 方法: 返回"true"或"false"字符串

另外，常被搞混的是直接使用 Number() 、 String() 與 Boolean() 三個強制轉換函數的用法，這與包裝對象的用法不同，包裝對象是必須使用 new 關鍵字進行對象實例化的，例如 new Number(123) ，而 Number('123') 則是強制轉換其他類型為數字類型的函數。

Number() 、 String() 與 Boolean() 三個強制轉換函數，所對應的就是在ECMAScript標準中的 ToNumber 、 ToString 、 ToBoolean 三個內部運算轉換的對照表。而當它們要轉換對象類型前，會先用上面說的 ToPrimitive 先轉換對象為原始數據類型，再進行轉換到所要的類型值。

不管如何，包裝對象很少會被使用到，一般我們只會直接使用原始數據類型的值。而強制轉換函數因為也有替換的語法，它們會被用到的機會也不多。

實例

字符串 + 其他原始類型

字符串在加號運算有最高的優先運算，與字符串相加必定是字符串連接運算(concatenation)。所有的其他原始數據類型轉為字符串，可以參考ECMAScript標準中的 ToString 對照表，以下為一些簡單的例子:

> '1' + 123
"1123"

> '1' + false
"1false"

> '1' + null
"1null"

> '1' + undefined
"1undefined"

數字 + 其他的非字符串的原始數據類型

數字與其他類型作相加時，除了字符串會優先使用字符串連接運算(concatenation)的，其他都要依照數字為優先，所以除了字符串之外的其他原始數據類型，都要轉換為數字來進行數學的相加運算。如果明白這項規則，就會很容易的得出加法運算的結果。

所有轉為數字類型可以參考ECMAScript標準中的 ToNumber 對照表，以下為一些簡單的例子:

> 1 + true //true轉為1, false轉為0
2

> 1 + null //null轉為0
1

> 1 + undefined //null轉為NaN
NaN

數字/字符串以外的原始數據類型作加法運算

所以，當數字與字符串以外的其他原始數據類型直接使用加號運算時，就是轉為數字再運算，這與字符串無關。

> true + true
2

> true + null
1

> undefined + null
NaN

空數組 + 空數組

> [] + []
""

兩個數組相加，依然按照 valueOf -> toString 的順序，但因為 valueOf 是數組本身，所以會以 toString 的返回值才是原始數據類型，也就是空字符串，所以這個運算相當于兩個空字符串在相加，依照加法運算規則第2步驟，是字符串連接運算(concatenation)，兩個空字符串連接最后得出一個空字符串。

空對象 + 空對象

> {} + {}
"[object Object][object Object]"

兩個空對象相加，依然按照 valueOf -> toString 的順序，但因為 valueOf 是對象本身，所以會以 toString 的返回值才是原始數據類型，也就是"[object Object]"字符串，所以這個運算相當于兩個"[object Object]"字符串在相加，依照加法運算規則第2步驟，是字符串連接運算(concatenation)，最后得出一個"object Object"字符串。

但是這個結果有異常，上面的結果只是在Chrome瀏覽器上的結果，怎么說呢？

有些瀏覽器例如Firefox、Edge瀏覽器會把 {} + {} 直譯為相當于 +{} 語句，因為它們會認為以花括號開頭( { )的，是一個區塊語句的開頭，而不是一個對象字面量的語句，所以會認為略過第一個 {} ，把它認為是個 +{} 的語句，也就是相當于強制求出數字值的 Number({}) 運算，相當于 Number("[object Object]") 運算，最后得出的是 NaN 。

特別注意: {} + {} 在不同的瀏覽器有不同結果

如果在第一個(前面)的空對象加上圓括號( () )，這樣JS就會認為前面是個對象，就可以得出同樣的結果:

> ({}) + {}
"[object Object][object Object]"

或是分開來先定義對象的變量值，也可以得出同樣的結果，像下面這樣:

> let foo = {}, bar = {};
> foo + bar;

注: 上面說的行為這與加號運算的第一個(前面)的對象字面值是不是個空對象無關，就算是里面有值的對象字面，例如 {a:1, b:2} ，也是同樣的結果。

空對象 + 空數組

上面同樣的把 {} 當作區塊語句的情況又會發生，不過這次所有的瀏覽器都會有一致結果，如果 {} (空對象)在前面，而 [] (空數組)在后面時，前面那個會被認為是區塊而不是對象。

所以 {} + [] 相當于 +[] 語句，也就是相當于強制求出數字值的 Number([]) 運算，相當于 Number("") 運算，最后得出的是 0 數字。

> {} + []
0

> [] + {}
"[object Object]"

特別注意: 所以如果第一個(前面)是 {} 時，后面加上其他的像數組、數字或字符串，這時候加號運算會直接變為一元正號運算，也就是強制轉為數字的運算。這是個陷阱要小心。

Date對象

Date對象的 valueOf 與 toString 的兩個方法的返回值:

valueOf 方法返回值:
toString 方法返回值:

Date對象上面有提及是首選類型為"字符串"的一種異常的對象，這與其他的對象的行為不同(一般對象會先調用 valueOf 再調用 toString )，在進行加號運算時時，它會優先使用 toString 來進行轉換，最后必定是字符串連接運算(concatenation)，例如以下的結果:

> 1 + (new Date())
> "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"

要得出Date對象中的 valueOf 返回值，需要使用一元加號(+)，來強制轉換它為數字類型，例如以下的代碼:

> +new Date()
1480180751492

Symbols類型

ES6中新加入的Symbols數據類型，它不算是值也不是對象，所以完全不能直接用于加法運算，它并沒有內部自動轉型的設計，使用時會報錯。

總結

{} + {} 的結果是會因瀏覽器而有不同結果，Chrome中是 [object Object][object Object] 字符串連接，但其它的瀏覽器則是認為相當于 +{} 運算，得出 NaN 數字類型。

{} + {} 的結果是相當于 +[] ，結果是 0 數字類型。

來自：https://segmentfault.com/a/1190000008038678

本文由用戶 JanWadswort 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1483749588765.html

JavaScript開發 JavaScript