JavaScript隱式類型轉換

bingo 發(fā)布于2019-08-23 15:12 / 1359人閱讀

摘要：所謂裝箱轉換，正是把基本類型轉換為對應的對象，他是類型轉換中一種相當重要的種類。拆箱轉換在標準中，規(guī)定了函數，它是對象類型到基本類型的轉換即，拆箱轉換。拆箱轉換會嘗試調用和來獲得拆箱后的基本類型。

JavaScript隱式類型轉換 基本數據類型

ECMAScript 一共定義了七種 build-in types，其中六種為 Primitive Value，Null， Undefined，String， Number， Boolean， Symbol。而最后一種 Object build-in type 與通常意義上的 JavaScript 中 Object 并不一樣，總的來說，只要不屬于 Primitive Value 的值，就屬于 Object 類型，比如數組、對象、日期、正則、函數。

裝箱轉換

每一種基本類型 number, string, boolean, symbol 在 Object(build-in type) 中都有對應的類。所謂裝箱轉換，正是把基本類型轉換為對應的對象，他是類型轉換中一種相當重要的種類。

JavaScript 語言設計上試圖模糊對象和基本類型之間的關系，比如，我們可以直接在基本類型上使用對象的方法：

console.log("abc".charAt()); // a

甚至我們在原型上添加方法，都可以應用于基本類型。

實際上是 . 運算符提供了裝箱操作，它會根據基礎類型構造一個臨時對象，使得我們能在基礎類型上調用對應對象的方法。

拆箱轉換

在 JavaScript 標準中，規(guī)定了 ToPrimitive 函數，它是對象類型到基本類型的轉換（即，拆箱轉換）。

對象到 String 和 Number 的轉換都遵循“先拆箱再轉換”的規(guī)則。通過拆箱轉換，把對象變成基本類型，再從基本類型轉換為對應的 String 或者 Number。

拆箱轉換會嘗試調用 valueOf 和 toString 來獲得拆箱后的基本類型。如果 valueOf 和 toString 都不存在，或者沒有返回基本類型，則會產生類型錯誤 TypeError。

ToPrimitive

ToPrimitive 用于將 Object 轉為 Primitive Value

對于我們平常遇到的 Object，其處理邏輯是：

調用 Object.valueOf，如果結果是 Primitive Value，則返回;

調用 Object.toString，如果結果是 Primitive Value，則返回;

都不是，返回 TypeError

普通對象和數組的這兩個方法返回的結果如下：

var a = [12]
var b = {a: 123}

// [12]
a.valueOf()

// "12"
a.toString()

// {a: 123}
b.valueOf()

// "[object Object]"
b.toString()

如上，兩者的 valueOf 返回的都不是 Primitive Value (返回了自身，還是 Object 類型)。那么，根據規(guī)范，兩者調用 ToPrimitive 返回的將是一個 字符串。

顯示類型轉換 ToBoolean

這個方法用于將不是 Boolean 類型的值轉換為 Boolean 類型。

Undefined 返回 false

Null 返回 false

所有 Object 類型都會被轉換為 true;

Number 類型中，0，NaN 會被轉換為 false，其它都為 true

只有空字符串為 false，其它都為 true

ToNumber

其它類型轉換為 Number 類型。

Undefined 返回 NaN

Null 返回 0

Boolean 類型，true 為 1； false 為 0

String 類型，如果滿足數字語義則轉為數字，否則轉換為 NaN

Object 類型，先轉換為 Primitive Value 再遞歸調用自身 ToNumber 來轉換。

// "56" ==> 56
Number([56])

// ",56" ==> NaN
Number([,56])

// "55,56" ==> NaN
Number([55, 56])

ToString

Number 返回對應數值字符串

Boolean 返回字符串 “true” 或者 “false”

Undefined 返回 “undefined”

Null 返回 “null”

隱式類型轉換

了解了上面的知識，可以開始進入我們的正題了，在 JavaScript 中可以觸發(fā)隱式類型轉換的操作有：

四則運算: +, -, *, /

比較運算符: ==, <, >, >=, <=

判斷語句: if, while

Native調用: console, alet 輸入時會自動轉換成 String 類型

邏輯非 !，將直接調用 ToBoolean 方法，然后取反返回。

比較運算符 非嚴格比較（==）

如果 Type 相同，等價于 A === B

特別的, undefined == null

String == Number，則把 String 轉換成 Number

有 Boolean 值的，將 Boolean 轉換成 Number

Object String/Number/Symbol，將 Object 轉換成 Primitive Value

否則，返回 false

// "12" ==> 12;
// 返回 true
12 == "12"

// 轉 boolean: [] == 0
// 轉 object: "" == 0
// 轉 string: 0 == 0
// 返回 true
[] == false

// 轉 object: "45" == 45
// 轉 string: 45 == 45
// 返回 true
[45] == 45

// 單目: {} == false
// 轉 boolean: {} == 0
// 轉 object: "[object Object]" == 0
// 轉 string: NaN == 0
// 返回 false
{} == !{}

// 單目：[] == fasle
// 轉 boolean： [] == 0
// 轉 array: "" == 0
// 轉 string: 0 == 0
// 返回 true
[] == ![]

[] == []
[] == 0

嚴格比較 (===)

類型不同，直接返回 false

Number 類型判斷：有 NaN 就 false；

特別的 +0 === -0；

最后調用 SameValueNonNumber

另外 != 和 !== 則是指出了 A != B 與 !(A == B) 是完全等價的。在判斷 !=/!== 時，其實就是在判斷 ==/===.

不等關系

兩邊操作數調用 ToPrimitive 轉換為 Primitive Value

由于 Primitive Value 出來有 String 和 Number 兩種結果，分別有不同的比較規(guī)則；

如果兩邊的值都是 String，則按 code unit 比較，

如果一邊是 Number，則將另一邊也轉換為 Number;注意 Number 需要處理 +0/-0/NaN/Infinity 等情況

// 注意轉換后為 "45" < "46"
// 按字符串規(guī)則比較 最終比較的是 "5".charCodeAt() < "6".charCodeAt() => 53 < 54
// 返回 true
[45] < [46]

// 同理 [10] < [9] 最后進行的是 "10" < "9" 的比較，是字符串之間的筆記，不會轉換為數字間的比較，
// 其實最終比較的是 "1".charCodeAt() < "9".charCodeAt() => 49 < 57.
[10] < [9]

練習題

// 每個表達式是 true 還是 false 呢？為啥呢？

// 初階
!{}
12 == "12"
"false" == false
null == undefined

// 高階
[] == []
[] == false
[] === false
[45] == 45

// 終階
[45] < [46] ?
[10] < [9] ?
{} == !{}
{} != {}
-0 === +0
NaN === NaN
NaN != NaN

// 轉換條件 轉換后類型 結果
[]+[] // String “”
[1,2]+[3,4] // String “1,23,4”
[]+{} // String “[object Object]”
[1,2] + {a:1} // String “1,2[object Object]”
{}+[] // Number 0
{}+[1] //Number 1
{a:1}+[1,2] // Number NaN
{a:1}+{b:2} // Chrome - String “[object Object][object Object]” (背后實現eval)
{a:1}+{b:2} // Firefox - Number NaN
true+true // Number 2
1+{a:1} // String “1[object Object]”

reference

JavaScript 中的隱式類型轉換的規(guī)范

JavaScript 運算符規(guī)則與隱式類型轉換詳解

JavaScript類型：關于類型，有哪些你不知道的細節(jié)？

深入淺出弱類型JS的隱式轉換

JavaScript字符串間的比較

ecma-sec-relational-operators

云服務器 GPU云服務器隱式類型轉換隱式轉換 java隱式轉換 mysql隱式轉換

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

轉載請注明本文地址：http://systransis.cn/yun/101673.html

JavaScript 強制類型轉換

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

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

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

Jenny_Tong 2019-08-19 17:39 評論0 收藏0
JavaScript 中的隱式類型轉換

摘要：雖然你可能很驚訝甚至可能懷疑是的但是這都是有語言自己的一個隱式類型轉換的套路?；镜碾[式類型轉換基本類型的隱式轉換這個其實我們使用的最多例如結果返回的是而不是這就是類型的隱式轉換。基本上所有的語言都有隱式類型轉換 ,但是對于弱類型語言(JS) 來說 ,隱式類型轉換會比強類型語言(Java) 帶來更大的副作用,有些行為甚至是不可思議的。雖然你可能很驚訝 ,甚至可能懷疑是 JS 的...

txgcwm 2019-08-26 11:44 評論0 收藏0
JavaScript數據類型及(隱式)類型轉換詳解

摘要：顯示的調用轉換過程稱為顯式強制類型轉換，隱式的情況稱為隱式強制類型轉換。隱式強制類型轉換讓代碼變得晦澀難懂而又便捷而奇妙。事實上，允許在比較中進行強制類型轉換，而不允許。如果有并且返回基本類型值，就使用該值進行強制類型轉換。 JavaScript是一種非常靈活的現代編程語言，靈活到使用者極其容易被忽視的它那廣闊的世界以及它帶給我們的無限遐想空間。本文將對JavaScript最最基礎也最...

hiyayiji 2019-08-26 10:28 評論0 收藏0
Front-end developmenter必看，超實用的javaScript隱式類型轉換規(guī)則記憶

摘要：下面先看看涉及到的幾個函數以及他們的轉換規(guī)則，這個是需要記憶的內容類型轉換需要使用到的函數對于布爾值用到的是對于數值，用到的是當然還有但是對于隱式類型轉換的時候，調用的是前者。 javaScript類型轉換規(guī)則 javaScript的類型轉換其實一直是很多前端開發(fā)人員很迷的地方，一會兒這里要轉換，一會兒那里又要轉換，總之就是一個大寫的迷，因為它隱式類型轉換的地方實在是太多了。但其實...

fuchenxuan 2019-08-23 12:13 評論0 收藏0