Javascript中的類型轉換

Javascript為什麼會有類型轉換

Javascirpt世界裡，不推薦大量的使用try...catch...，我想大概原因：

• JS里任何類型之間的算數運算，邏輯運算和位運算都不會拋異常或者錯誤。例如 1/0 == Infinity， 0/0 = NaN， + 1 = "1" 等。所以catch到excepton／error的幾率，相對於編譯型語言甚至於python／ruby等動態語言，是大大地降低了。

• try...catch...會在catch里轉換到一個新的作用域，catch裡面調用本函數或者函數外的對象時，增加了一層作用域的查找，降低了運行效率

• 如果有未知的風險，確實可以try...catch...。但是如果你的代碼里有比較多的try...catch...，這就是bad smell，說明需要加強coding質量或者重構了。

類型轉換法則

這裡討論JS里對不同類型進行運算的時候，是如何做類型轉換的（一般是隱式轉換）。

加法運算

1. 1 + "-1" = "1-1"

   基本類型之間相加時，只要其一是字元串，另外一個也會先轉換為字元串，結果就變成字元串的連接。

2. + 1 = "1"

   引用類型和基本類型相加。引用類型先轉化為基本類型。轉化過程：先查看對象的valueOf方法是否返回基本類型。數組的valueOf返回它本身，屬於object類型，不是基本類型。所以再調用toString方法。空數組的toString返回空字元串。結果轉為『』 + 1. 返回字元串『1』。

3. + { } = [object Object]

   引用類型之間的加法。引用類型需先轉換為基本類型。 參考2，空數組轉為空字元串。類似地空對象{ } 轉換時，也先查看{ }.valueOf. 因為 {}的valueof方法返回它自身，所以會調用{}.toString返回『[object Object]"。

   這樣結果變成 "" + "[object Object]" = "[object Object]"

4. 1 + null = 1

   因為已經是基本類型，而且沒有字元串，所以會基於number類型運算。 null轉為0， 結果是 1 + 0 = 1

5. 1 + undefined = NaN

   undefined 轉為NaN, so 1+ NaN = NaN

6. false + null = 0

   都是基本類型而且沒有字元串，所以基於數字類型相加。 false轉為0， null也為0. 結果 0 + 0 = 0

7. [1] + [2] = "12"

   分別調用toString方法以轉為基本類型，得到"1"和『2』, "1" + "2" = "12"

法以外的算數運算

加法以外的算數運算，如果有object類型（包括數組），先轉為基本類型，這和加法運算是相同的。轉換過程也是先查看valueOf是否返回基本類型，如果不是，就調用toString（這裡假定toString都返回string。除非誰閑著沒事，非得給一對象的toString返回對象類型？）

和加法運算不同的是，轉換為基本類型後，所有的基本類型再轉為number類型，最終以number類型進行運算。

1. 1 - "-1" = "-1"

   字元串「-1」轉為number的-1， 結果1 - (-) = 2

2. - 1= -1

   先轉為基本類型，是空字元。空字元再轉為number為0 ，結果是0 - 1 = -1

3. ／ { } 空數組轉為基本類型是空字元，空對象轉為基本類型是[object Object]，二者再分別轉為數字類型是 0 和 NaN，最終結果為0/NaN = NaN

4. 1 / null

   都已經為基本類型，所以只要把null轉為number類型的0， 然後1 / 0 = Infinity

5. 1 * undefined

   都已經為基本類型，所以只要把undefined轉為number類型的NaN， 然後1 * NaN = NaN

邏輯運算

1. 1 && null = null.

   因為1 是真值，則返回第二個值， 即null

2. null && undefined = null

   返回null，因為null是falsy，則返回第一個。

3. 0 || {} = {}

   返回 {}. 因為0 是falsy，返回第二個

4. 1 || null = 1

   返回1， 因為1是真值，返回第一個

位運算

1. ～n = -(n+1)，

   例如～25 = -26. 這裡是帶符號的取反。如果是無符號的取反，結果就不一樣了，有興趣的可以在C語言里試試 ～25u

2. ～null = -1

   null轉為0， ～0 = -(0+1) =-1

3. ～undefined//SyntaxError: Invalid or unexpected token

4. ～～23.5 = 23~~-23.5 = -23

   但 Math.floor(-23.5) = -24. 故而一般用～～取整數位

If 運算

if(-1)和if (-1 == true) 是不一樣的。前者是真假判斷: -1是truthy,是真值。後者類似算術運算:先轉為number，true 轉為1， 故而 -1 == 1是假值。

這裡總結了js類型轉換和運行的基本規律，希望是可以滿足基本的項目需要了。

JS不同類型之間的類型轉換，確實是讓人撓頭的語言。我猜想可能是JS產生的時候，web方興未艾，web工程師的編程功底還沒有很規範（至少沒有今天這麼多資料書籍和培訓機構等），所以js允許類型轉換，不同類型之間運算時，保證不拋異常或者盡量少拋。

但是現在前端和後端一樣的龐大了，顯然js的這樣那樣的技法往往會使工程師掉入陷阱。typescript應允而生，一個目的是也是幫助初級工程師寫出還可以的代碼（另外一個目的估計是降低後端開發者寫前端的門檻和思維轉變）。從這角度解讀，ts也是為滿足項目工程和公司的需要。如果想深入js學習，原生的js（es5/6）是繞不開的。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！