JS數(shù)據(jù)類型

在 JavaScript 語言中數(shù)據(jù)類型分為2大類：基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型

基本數(shù)據(jù)類型有：

• number
• string
• boolean
• null
• undefined
• symbol
• bigint
  

復(fù)雜數(shù)據(jù)類型有：

• 標(biāo)準(zhǔn)普通對象：object
• 標(biāo)準(zhǔn)特殊對象：Array、RegExp、Date、Math、Error……
• 非標(biāo)準(zhǔn)特殊對象：Number、String、Boolean……
• 可調(diào)用/執(zhí)行對象「函數(shù)」：function
  

類型之間的轉(zhuǎn)換

類型轉(zhuǎn)換可以分為兩種：隱式類型轉(zhuǎn)換 和 顯式類型轉(zhuǎn)換。

顯式類型強(qiáng)制轉(zhuǎn)換 是指當(dāng)開發(fā)人員通過編寫適當(dāng)?shù)拇a用于在類型之間進(jìn)行轉(zhuǎn)換，比如：Number(value)。

隱式類型轉(zhuǎn)換 是指在對不同類型的值使用運(yùn)算符時(shí)，值可以在類型之間自動的轉(zhuǎn)換，比如0 == null

在 JS 中只有 3 種類型的轉(zhuǎn)換:

• 轉(zhuǎn)化為 Number 類型：Number() / parseFloat() / parseInt()
• 轉(zhuǎn)化為 String 類型：String() / toString()
• 轉(zhuǎn)化為 Boolean 類型: Boolean()
  

類型轉(zhuǎn)換的邏輯無論在原始類型和對象類型上，他們都只會轉(zhuǎn)換成上面 3 種類型之一。所以只需要弄清在什么場景下應(yīng)該轉(zhuǎn)成哪種類型就可以了

轉(zhuǎn)換為boolean

顯式：Boolean()方法可以用來顯式將值轉(zhuǎn)換成布爾型。

隱式：隱式類型轉(zhuǎn)換通常在邏輯判斷或者有邏輯運(yùn)算符時(shí)被觸發(fā)（|| && !）。

boolean 類型轉(zhuǎn)換只會有 true 或者 false 兩種結(jié)果。除了“0/NaN/空字符串/null/undefined”五個(gè)值是false，其余都是true

轉(zhuǎn)換為string

顯式：String()方法可以用來顯式將值轉(zhuǎn)為字符串。

String([1,2,3])    //"1,2,3"
String({})    //"[object Object]"

隱式轉(zhuǎn)換通常在有 + 運(yùn)算符并且有一個(gè)操作數(shù)是 string 類型時(shí)被觸發(fā)。

“+”代表的字符串拼接，如果下面的情況存在時(shí)會觸發(fā)轉(zhuǎn)換

• 有兩邊，一邊是字符串，則會變成字符串拼接；
• 有兩邊，一邊是對象
  

1 + {}     //"1[object Object]"
NaN + {} //"NaN[object Object]"

轉(zhuǎn)換為number

顯式：Number()方法可以用來顯式將值轉(zhuǎn)換成數(shù)字類型。

字符串轉(zhuǎn)換為數(shù)字：空字符串變?yōu)?，如果出現(xiàn)任何一個(gè)非有效數(shù)字字符，結(jié)果都是NaN

Number("")           //0
Number("10px")       //NaN
Number("10")         //10

布爾轉(zhuǎn)換為數(shù)字

Number(true)         //1
Number(false)        //0

null和undefined轉(zhuǎn)換成數(shù)字

Number(null)         //0
Number(undefined)    //NaN

Symbol無法轉(zhuǎn)換為數(shù)字，會報(bào)錯(cuò)：Uncaught TypeError: Cannot convert a Symbol value to a number

BigInt去除“n”

Number(12312412321312312n)     //12312412321312312

對象轉(zhuǎn)換為數(shù)字，會按照下面的步驟去執(zhí)行

先調(diào)用對象的 Symbol.toPrimitive 這個(gè)方法，如果不存在這個(gè)方法

再調(diào)用對象的 valueOf 獲取原始值，如果獲取的值不是原始值

再調(diào)用對象的 toString 把其變?yōu)樽址?/p>

最后再把字符串基于Number()方法轉(zhuǎn)換為數(shù)字

let obj ={
    name:'xxx'
}
console.log(obj-10) // 數(shù)學(xué)運(yùn)算：先把obj隱式轉(zhuǎn)換為數(shù)字，再進(jìn)行運(yùn)算
//運(yùn)行機(jī)制
obj[Symbol.toPrimitive] //undifined 
obj.valueof() // {name:xxx}
obj.toString() // [object object]
Number ("[object object]") // NaN
NaN-10 // NaN 
obj+10 //"[object object]10"

隱式：number 的隱式類型轉(zhuǎn)換是比較復(fù)雜的，因?yàn)樗梢栽谙旅娑喾N情況下被觸發(fā)。

• 比較操作（>, <, <=, >=）
• 按位操作（| & ^ ~）
• 算數(shù)操作（- + * / %）， 注意：當(dāng) + 操作存在任意的操作數(shù)是 string 類型時(shí)，不會觸發(fā) number 類型的隱式轉(zhuǎn)換
• 一元 + 操作
  

操作符==兩邊的隱式轉(zhuǎn)換規(guī)則

如果兩邊數(shù)據(jù)類型不同，需要先轉(zhuǎn)為相同類型，然后再進(jìn)行比較，以下幾種情況需要注意一下：

可以根據(jù)這個(gè)圖進(jìn)行參考，如對象和布爾比較的話，

• 對象 => 字符串 => 數(shù)值
• 布爾值 => 數(shù)值。
  

對象==字符串

[1,2,3]=='1,2,3'              //true
[1,2,3][Symbol.toPrimitive]   //undefined
[1,2,3].valueOf()             //[1, 2, 3]
[1,2,3].toString()            //"1,2,3"

null/undefined

null==undefined      //true 
null===undefined     //false  不會發(fā)生隱試類型轉(zhuǎn)換

注意：null/undefined和其他任何值都不相等

對象==對象

比較的是堆內(nèi)存地址，地址相同則相等

{}=={}      //false   因?yàn)楸容^的是地址

NaN

除了以上情況，只要兩邊類型不一致，剩下的都是轉(zhuǎn)換為數(shù)字，然后再進(jìn)行比較

需要注意的情況

{} + [] === 0               // true
[] + {} === 0               // false

[] + {}  = "[object Object]"
{} + []  = 0
/**
  * 對于編譯器而言，代碼塊不會返回任何的值
  * 接著+[]就變成了一個(gè)強(qiáng)制轉(zhuǎn)number的過程
  * []通過ToPrimitive變成''，最后''通過ToNumber操作轉(zhuǎn)換成0
  **/

結(jié)尾練習(xí)

let result = 100 + true + 21.2 + null + undefined + “Tencent” + [] + null + 9 + false;

result的結(jié)果是？

1.首先100 + true
+連接符兩邊存在Number類型，true轉(zhuǎn)number為1，進(jìn)行加法運(yùn)算，結(jié)果為：101
2.101 + 21.2
+連接符兩邊均為Number類型，進(jìn)行加法運(yùn)算，結(jié)果為：122.2
3.122.2 + null
+連接符兩邊存在Number類型，null轉(zhuǎn)number為0，進(jìn)行加法運(yùn)算，結(jié)果為：122.2
4.122.2 + undefined
+連接符兩邊存在Number類型，undefined轉(zhuǎn)number為NaN，NaN與任何數(shù)據(jù)類型計(jì)算都為NaN，結(jié)果為：NaN
5.NaN + "Tencent"
+連接符兩邊存在String類型，NaN轉(zhuǎn)string為"NaN"，進(jìn)行字符串拼接，結(jié)果為："NaNTencent"
6."NaNTencent" + []
+連接符兩邊存在String類型，[]轉(zhuǎn)string為""，進(jìn)行字符串拼接，結(jié)果為："NaNTencent"
7."NaNTencent" + null
+連接符兩邊存在String類型，null轉(zhuǎn)string為"null"，進(jìn)行字符串拼接，結(jié)果為："NaNTencentnull"
8."NaNTencentnull" + 9
+連接符存在String類型，9轉(zhuǎn)string為"9"，進(jìn)行字符串拼接，結(jié)果為："NaNTencentnull9"
9."NaNTencentnull9" + false
+連接符存在String類型，false轉(zhuǎn)string為"false"，進(jìn)行字符串拼接，結(jié)果為："NaNTencentnull9false"

總結(jié)

到此這篇關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)js數(shù)據(jù)類型轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論