通過大廠面試題研究JavaScript數(shù)據(jù)類型轉(zhuǎn)換
關(guān)注公眾號(hào) 前端人，回復(fù)“加群”
添加無廣告優(yōu)質(zhì)學(xué)習(xí)群
JavaScript 本身是一門弱類型語(yǔ)言，這意味著 JavaScript 變量沒有預(yù)先確定的類型。變量當(dāng)前的類型由其值所決定，也許上一秒種的string，下一秒可能就是個(gè)array。
所以當(dāng)我們進(jìn)行某些操作時(shí)，變量可以進(jìn)行類型之間的轉(zhuǎn)換，接下來我們就談一談數(shù)據(jù)類型到底是如何轉(zhuǎn)換的。
前言
先來看一道面試題
let result = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false;
// result應(yīng)該是？
題目考察的知識(shí)點(diǎn)是數(shù)據(jù)類型隱式轉(zhuǎn)換，想要做對(duì)這道題，我們必須了解 JavaScript 在轉(zhuǎn)換的時(shí)候，會(huì)遵循哪些規(guī)則：
JS數(shù)據(jù)類型
首先，在 JavaScript 語(yǔ)言中數(shù)據(jù)類型分為2大類：原始值類型和對(duì)象類型
原始值類型，就是我們常說的「值類型/基本數(shù)據(jù)類型」
numberstringbooleannullundefinedsymbolbigint
而對(duì)象類型指的是「引用數(shù)據(jù)類型」
標(biāo)準(zhǔn)普通對(duì)象： object標(biāo)準(zhǔn)特殊對(duì)象： Array、RegExp、Date、Math、Error……非標(biāo)準(zhǔn)特殊對(duì)象： Number、String、Boolean……可調(diào)用/執(zhí)行對(duì)象「函數(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)換是指在對(duì)不同類型的值使用運(yùn)算符時(shí)，值可以在類型之間自動(dòng)的轉(zhuǎn)換，比如 1 == null。
我們需要知道的是：在 JS 中只有 3 種類型的轉(zhuǎn)換
轉(zhuǎn)化為 Number 類型： Number()/parseFloat()/parseInt()轉(zhuǎn)化為 String 類型： String()/toString()轉(zhuǎn)化為 Boolean 類型: Boolean()
類型轉(zhuǎn)換的邏輯無論在原始類型和對(duì)象類型上，他們都只會(huì)轉(zhuǎn)換成上面 3 種類型之一。所以只需要弄清在什么場(chǎng)景下應(yīng)該轉(zhuǎn)成哪種類型就可以了
轉(zhuǎn)換為boolean
??顯式：Boolean()方法可以用來顯式將值轉(zhuǎn)換成布爾型。
??隱式：隱式類型轉(zhuǎn)換通常在邏輯判斷或者有邏輯運(yùn)算符時(shí)被觸發(fā)（|| && !）。
Boolean(2) // 顯示類型轉(zhuǎn)換
if(2) {} // 邏輯判斷觸發(fā)隱式類型轉(zhuǎn)換
!!2 // 邏輯運(yùn)算符觸發(fā)隱式類型轉(zhuǎn)換
2 || 'hello' // 邏輯運(yùn)算符觸發(fā)隱式類型轉(zhuǎn)換
邏輯運(yùn)算符（比如 || 和 &&）是在內(nèi)部做了 boolean 類型轉(zhuǎn)換，但實(shí)際上返回的是原始操作數(shù)的值，即使他們都不是 boolean 類型。
// 返回 number 類型 123，而不是 boolean 型 true
// 'hello' 和 '123' 仍然在內(nèi)部會(huì)轉(zhuǎn)換成 boolean 型來計(jì)算表達(dá)式
let x = 'hello' && 123 // x === 123
boolean 類型轉(zhuǎn)換只會(huì)有 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í)會(huì)觸發(fā)轉(zhuǎn)換
有兩邊，一邊是字符串，則會(huì)變成字符串拼接； 有兩邊，一邊是對(duì)象
1 + '123' //"1123"
1 + {} //"1[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ù)字，會(huì)報(bào)錯(cuò)：Uncaught TypeError: Cannot convert a Symbol value to a number
Number(Symbol()) //Uncaught TypeError: Cannot convert a Symbol value to a number
BigInt去除“n”
Number(12312412321312312n) //12312412321312312
對(duì)象轉(zhuǎn)換為數(shù)字，會(huì)按照下面的步驟去執(zhí)行
先調(diào)用對(duì)象的 Symbol.toPrimitive這個(gè)方法，如果不存在這個(gè)方法再調(diào)用對(duì)象的 valueOf獲取原始值，如果獲取的值不是原始值再調(diào)用對(duì)象的 toString把其變?yōu)樽址?/section>最后再把字符串基于 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
??隱式：number 的隱式類型轉(zhuǎn)換是比較復(fù)雜的，因?yàn)樗梢栽谙旅娑喾N情況下被觸發(fā)。
比較操作（>, <, <=, >=） 按位操作（| & ^ ~） 算數(shù)操作（- + * / %）， 注意：當(dāng) + 操作存在任意的操作數(shù)是 string 類型時(shí)，不會(huì)觸發(fā) number 類型的隱式轉(zhuǎn)換 一元 + 操作
操作符==兩邊的隱式轉(zhuǎn)換規(guī)則
如果兩邊數(shù)據(jù)類型不同，需要先轉(zhuǎn)為相同類型，然后再進(jìn)行比較，以下幾種情況需要注意一下：
對(duì)象==字符串
將對(duì)象轉(zhuǎn)換為字符串
[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
//null/undefined和其他任何值都不相等
對(duì)象==對(duì)象
比較的是堆內(nèi)存地址，地址相同則相等
{}=={} //false 因?yàn)楸容^的是地址
NaN
除了以上情況，只要兩邊類型不一致，剩下的都是轉(zhuǎn)換為數(shù)字，然后再進(jìn)行比較
需要注意的情況
{} + [] === 0 // true
[] + {} === 0 // false
{} + []
/**
* 對(duì)于編譯器而言，代碼塊不會(huì)返回任何的值
* 接著+[]就變成了一個(gè)強(qiáng)制轉(zhuǎn)number的過程
* []通過oPrimitive變成''，最后''通過ToNumber操作轉(zhuǎn)換成0
**/
{}; +[];
最后
我們來看下本文開頭那道題
let result = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false;
// result應(yīng)該是？
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" 點(diǎn)擊關(guān)注我們↓
原文地址
juejin.cn/post/6956170676327677966