{}+[] = ? 和 []+{} = ? 淺談JS數據類型轉換

    參加公司技術嘉年華第一季（前端、服務端）的間隙，陳導問了我一個問題：{}+[] 和 []+{}兩個表達式的值分別是什麼？根據個人理解我以爲結果應該都是"[object Object]"，可是結果卻並非這樣子的（{}+[] = 0  []+{} = '[object Object]'），我就想這不科學呀，一會兒顛覆了我所學過的js知識了。因而我決定搞明白這到底是是什麼與緣由致使的？

    經過查找資料，發現之因此結果不同，是由於js解釋器把{}當作了代碼塊語法解析，那麼{}+[]就變成+[]，這樣的話很容易就解釋了上面兩個表達式的結果了~

    爲何{}在右邊就沒有被解釋成代碼塊語法呢？這就要講到+運算符的用法，+能夠作數字的加法和字符串的連接，只要有一個是字符串，另一個就會數據類型轉換成字符串，而後進行拼接操做；都爲對象的時候，這種狀況下會經過valueOf獲取對象的值，若是原始值仍是對象的話，會經過toString()方法，轉化成字符串。

    下面解釋一下{}+[]和[]+{}的執行過程：

    {}+[]，由+運算符的語法能夠知道，會從左向右解析，遇到{}被認爲是代碼塊（語法）被忽略，繼續就變成了+[]，此時+就不是加法運算符，也不是字符串鏈接符了，變成了轉換數字的運算符了，數組經過valueOf方法獲取值仍是數組，執行toString方法後變成''空字符串，而後空字符串數據類型轉化成數字，就變成了0，也解釋了變種{}-[]=-0

    []+{}，從左向右解析，[]被轉化成''空字符串，{}經過valueOf方法獲取原始值仍是對象（注意不能經過{}.valurOf()獲取，此時{}會被解析成代碼塊），經過toString方法結果是'[object Object]'，接下來解釋簡單的字符串鏈接問題了，因此結果是'[object Object]'。注：對象的toString和valueOf都不同，而且能夠自定義。

    擴展：由上面的例子，進而討論一下JS中數據類型轉換的問題

    JS的取值特別靈活，會根據上下文語境，對數據進行隱式的轉換（固然也能夠經過顯示的方法，對數據進行類型轉換）。通常狀況下，這種數據類型轉換多用在運算符運算的時候.js的數據分紅兩大類，原始值和對象，原始值有：null undefined string number boolean，其餘都是對象。js引擎提供三種數據類型轉換操做： ToPrimitive(),ToNumber(),ToString()。

    toPrimitive()是將值轉化成原始值，有兩個參數，第一個須要轉換的數據，第二個參數是prefferedType（number或者string），處理的順序是：首先若是是原始值直接返回原始值，其次執行valueOf方法，若是返回原始值直接返回，若是不是，執行toString方法，轉化成字符串。 Date對象第二個參數是string（若是第二個參數是string的話，函數的處理順序應該把toString方法提到第二步），其餘對象都是number。

第一個參數	是不是原始值	valueOf	toString	備註
new Obeject()	否	Object	'[object Object]'
new Number(1)	否	1	'1'	隱式轉換不是對象，可用Object.prototype.isPrototypeOf檢測
new Blooean(1)	否	true	'true'	隱式轉換不是對象，可用Object.prototype.isPrototypeOf檢測
new Date()	否	1395985229639	‘ Fri Mar 28 2014 13:40:29 GMT+0800 (中國標準時間)   ’
new Function('console.log(1);')	否	function anonymous() { console.log(1); }	' function anonymous() { console.log(1); } '
...	...	...	...

     toNumber將值轉化成數字。原始值轉換程數字以下表（對象參照 toPrimitive ) ：

原始值	結果
null	+0
undefined	NAN
123	123
'123'	123
true/false	1/+0

 toString將值轉化成字符串，原始值轉化成字符串以下表（對象參照toPrimitive ）：

原始值	結果
null	'null'
undefined	'undefined'
123	'123'
'123a'	'123a'
true/false	'true'/'false'

上面是對javascript數據類型轉換的一點理解，在這裏記錄一下。

 

參考資料：

http://www.2ality.com/2012/01/object-plus-object.html （原文）

http://www.blublu.me/news/157778/?feed_sn=42&orderby=-id（譯文@紫雲飛）

《javascript權威指南（第六版）》