Javascript中的類型轉換

MobService 發布于2019-08-20 17:34 / 2786人閱讀

摘要：類型轉換法則這里討論里對不同類型進行運算的時候，是如何做類型轉換的一般是隱式轉換。轉化過程先查看對象的方法是否返回基本類型。結果轉為返回字符串。引用類型需先轉換為基本類型。后記不同類型之間的類型轉換，確實是讓人撓頭的語言。

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 = "1"
引用類型和基本類型相加。引用類型先轉化為基本類型。轉化過程：先查看對象的valueOf()方法是否返回基本類型。數組的valueOf返回它本身，屬于object類型，不是基本類型。所以再調用toString方法。空數組[]的toString返回空字符串。結果轉為‘’ + 1. 返回字符串‘1’。

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

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

1 + undefined = NaN
undefined 轉為NaN, so 1+ NaN = NaN

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

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

加法以外的算數運算

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

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

1 - "-1" = "-1"
字符串“-1”轉為number的-1，結果1 - (-) = 2

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

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

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

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

邏輯運算

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

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

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

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

位運算

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

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

~undefined //SyntaxError: Invalid or unexpected token

~~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）是繞不開的。

補證

前面提到“try...catch...會在catch里轉換到一個新的作用域”，這是在《你不知道的JavaScript》中卷里看到的。后來感覺還是做些論證，否則老覺得不踏實。看如下代碼：

function testException() {
    var error = "outer error"
    try {
        throw "inner error"
    } catch (error) {
        console.log(error)
        error = "modify inner error"
    }
    
    // 這里會輸出 outer error（而不是modify inner error），
    // 說明catch...里修改的error，不是testExecution()函數作用域里的，而是一個“新”作用域里的error
    // 所以我們可認為，catch...創建了一個新的作用域。看來它和函數作用域的類似點，都接受“參數”
    console.log(error) 
}

testException()

云服務器 GPU云服務器類型轉換 javascript中的強制轉換類型變量類型轉換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83685.html

JavaScript 中的強制類型轉換

摘要：完整清單是中添加，此處不予介紹布爾值用來表示可能是真或假的值。結果抽象比較運算符在比較它們之前在類型之間進行自動轉換。中的隱式轉換稱為強制類型轉換，并在規范中定義。這些內置類型可用于在不同類型之間進行顯式轉換。翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... 本文首發微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的前端技術文章 show...

endiat 2019-08-23 16:52 評論0 收藏0
JavaScript 強制類型轉換

摘要：強制類型轉換作為程序員，你一定獲取過當前系統的時間戳。比如對于變量而言，此次強制類型轉換是隱式的。然而則是非常典型的顯式強制類型轉換。隱式強制類型轉換大部分被詬病的強制類型轉換都是隱式強制類型轉換。 JavaScript 強制類型轉換作為 JavaScript 程序員，你一定獲取過當前系統的時間戳。在 ES5 引入 Date.now() 靜態方法之前，下面這段代碼你一定不會陌生： v...

OnlyLing 2019-08-22 16:33 評論0 收藏0
聊一聊 JS 中的『隱式類型轉換』

摘要：具體的行為取決于參數的類型。說到，就不得不提一下方法，方法自帶隱式類型轉換，該方法在測試其參數之前，會先調用方法將其轉換為數字。全等運算符會先進行數據類型判斷，并且不會發生隱式類型轉換。類型轉換還不行？還非得隱式？這是什么高級玩意？廢話不多說，我們先上一盤?，額，不對，先看一個例子吧。 3 + true 實際上在大多數編程語言中，都會認為上面這個表達式是錯誤的。因為布爾表達式與算術...

Jenny_Tong 2019-08-19 17:39 評論0 收藏0
JavaScript的類型轉換與各種運算符

摘要：第十七天筆記類型轉換隱式類型轉換隱式類型轉換是弱類型松散類型的在任何情況下都可以強制轉換定義類型類型以及類型的變量臥龍前端轉換為類型轉換為類型類型轉換為類型如果文本內容是普通的文本非數字轉換后的結果為如果文本內容是數字值轉換后的結果為對第十七天筆記類型轉換隱式類型轉換隱式類型轉換 JavaScript是弱類型/松散類型的在任何情況下都可以強制轉換 //定義number類型 s...

Aklman 2019-08-23 10:47 評論0 收藏0
簡單說 JavaScript中的tostring( ) 與 valueOf( )方法

摘要：日期類定義的方法會返回它的一個內部表示年月日以來的毫秒數。和應用的對象到原始值的轉換包含日期對象的一種特殊情形。簡單說與引發的思考簡單說通過的隱式轉換，關鍵時刻救你一命說明所有的對象都繼承有toString() 和 valueOf() 方法，對象到字符串，對象到數字的轉換，會通過調用待轉換對象的這兩個方法中的一個來完成。解釋 toString( )方法的作用是：返回一個反映這個...

ztyzz 2019-08-21 17:26 評論0 收藏0
簡單說 JavaScript中的tostring( ) 與 valueOf( )方法

摘要：日期類定義的方法會返回它的一個內部表示年月日以來的毫秒數。和應用的對象到原始值的轉換包含日期對象的一種特殊情形。簡單說與引發的思考簡單說通過的隱式轉換，關鍵時刻救你一命說明所有的對象都繼承有toString() 和 valueOf() 方法，對象到字符串，對象到數字的轉換，會通過調用待轉換對象的這兩個方法中的一個來完成。解釋 toString( )方法的作用是：返回一個反映這個...

tain335 2019-08-01 17:54 評論0 收藏0