前端進階系列（第3期）：常見的面試題 — 隱式類型轉換

經過閱讀前面幾期的內容，咱們已經知道了JavaScript中的數據類型以及其在運算時進行隱式轉換過程。

本期咱們將重點分析一下面試過程當中常見的隱式類型轉換的面試題。

1. 加號操做

請輸出代碼運行的結果並說明原理？

console.log(1 + undefined)
console.log(1 + null)
console.log(1 + true)
console.log('hello' + 123)
複製代碼

分析：經過加號運算符進行運算，存在兩種狀況，第一種是字符串與加號運算符組成字符串鏈接操做，第二種是非字符串與加號運算符組成算術運算操做（須要將對應項轉換成Number類型後進行操做）

答案：

console.log(1 + undefined) // NaN
console.log(1 + null) // 1
console.log(1 + true) // 2
console.log('hello' + 123) // 'hello123'
複製代碼

2. 字符串間的比較

請輸出代碼運行的結果並說明原理？

console.log('a' > 'b')
console.log('abc' > 'abe')
console.log('10' > '2')
console.log('hello' > 'world')
複製代碼

分析：字符串的比較是按位進行，將對應位的字符轉換成ASCII碼的值進行大小比較。

舉個例子：

console.log('10' > '2') // false
// 等同於
console.log('1'.charCodeAt()) // 49
console.log('2'.charCodeAt()) // 50
console.log('1'.charCodeAt() > '2'.charCodeAt()) // 49 > 50 
複製代碼

答案：

console.log('a' > 'b') // true
console.log('abc' > 'abe') // false
console.log('10' > '2') // false
console.log('hello' > 'world') // false
複製代碼

3. 引用類型之間的比較

請輸出代碼運行的結果並說明原理？

console.log([] == [])
console.log([] == ![])
console.log({} == {})
複製代碼

分析：引用類型之間的比較會直接調用valueOf()返回的值進行比較，若是返回值是基本類型則轉換成number類型進行比較，不然判斷返回值的引用地址是否一致，若是一致收相等不然不相等。

舉個例子：

console.log([] == ![]) // 爲何[] == ![]會爲true呢？
// 等同於
//第一步![]轉成Boolean類型
console.log([] == !Boolean([])) // [] == false
// 第二步轉成Number類型再進行關係運算
console.log(Number([]) == Number(false)) // 0 == 0
複製代碼

答案：

console.log([] == []) // false
console.log([] == ![]) // true
console.log({} == {}) // false
複製代碼

4. 邏輯非以及其關係運算

請輸出代碼運行的結果並說明原理？

// 布爾值判斷
console.log(!![])
console.log(!!{})
console.log(!!'hello')
console.log(!!123)
console.log(!!-123)
console.log(!!0)
console.log(!!'')
console.log(!!null)
console.log(!!undefined)
// 關係運算
console.log(1 == true)
console.log(1 > null)
console.log(1 > undefined)
複製代碼

分析：在JavaScript中邏輯非會調用Boolean轉換，可是在關係運算過程當中會將值轉換成Number類型再進行比較。

答案：

// 布爾值判斷
console.log(!![]) // true
console.log(!!{}) // true
console.log(!!'hello') // true
console.log(!!123) // true
console.log(!!-123) // true
console.log(!!0) // false
console.log(!!'') // false
console.log(!!null) // false
console.log(!!undefined) // false
// 關係運算
console.log(1 == true) // true
console.log(1 > null) // true
console.log(1 > undefined) // true
複製代碼

5. 浮點數相加

請輸出代碼運行的結果並說明原理？

console.log(0.1 + 0.2)
複製代碼

分析：這是一個浮點數計算精度問題，在JavaScript中只有一個數字類型number，而number使用的是IEEE 754雙精度浮點格式。詳細的分析請見下期專題分析。

答案：

console.log(0.1 + 0.2) // 結果是 0.30000000000000004，而不是 0.3
複製代碼

6. 特殊狀況

請輸出代碼運行的結果並說明原理？

console.log(null == undefined)
console.log(null == 0)
console.log(null == '')
console.log(null == NaN)
console.log(undefined == 0)
console.log(undefined == '')
console.log(undefined == NaN)
console.log(NaN == 0)
console.log(NaN == '')
console.log(NaN == NaN)
console.log(0 == '')
複製代碼

分析：主要是考查對JavaScript中原始值的理解。

• null特指對象的值未設置
• undefined指一個原始值自動分配給剛剛聲明的變量或沒有實際參數的形式參數
• NaN是（Not a Number）的縮寫，當一個值不能被Number轉換時返回NaN，NaN不等於任何值
• 0是原始值爲0的數字
• ''是原始值爲空的字符串

答案：

console.log(null == undefined) // true
console.log(null == 0) // false
console.log(null == '') // false
console.log(null == NaN) // false
console.log(undefined == 0) // false
console.log(undefined == '') // false
console.log(undefined == NaN) // false
console.log(NaN == 0) // false
console.log(NaN == '') // false
console.log(NaN == NaN) // false
console.log(0 == '') // true
複製代碼

以上內容雖然有進行驗證，但不知道描述上是否存在歧義，有些點表述的不是很清楚，望諒解。

若是有發現任何問題或者有更好的建議，歡迎直接給我留言。

交流

更多精彩內容請關注github.com/hankewins/b…,若是你以爲還不錯請給個star，很是感謝。