JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解
前言
在 JavaScript 中,在進(jìn)行運(yùn)算操作時(shí),如果兩邊數(shù)據(jù)不統(tǒng)一,這時(shí)我們編譯器會自動將運(yùn)算符兩邊的數(shù)據(jù)做一個(gè)數(shù)據(jù)類型轉(zhuǎn)換再進(jìn)行計(jì)算。這種由編譯器進(jìn)行自動轉(zhuǎn)換的方式被稱為隱式轉(zhuǎn)換。
數(shù)學(xué)運(yùn)算符中的類型轉(zhuǎn)換
減、乘、除
在對非 Number
類型運(yùn)用數(shù)學(xué)運(yùn)算符(-
、*
或 /
)時(shí),會先將非 Number
類型轉(zhuǎn)換為 Number
類型再進(jìn)行計(jì)算。示例如下:
2 - true // 結(jié)果為 1,首先把 true 轉(zhuǎn)換為數(shù)字 1,然后執(zhí)行 2 - 1 2 - null // 結(jié)果為 0,首先把 null 轉(zhuǎn)換為數(shù)字 0,然后執(zhí)行 2 - 0 2 - undefined // 結(jié)果為 NaN,因?yàn)?undefined 被轉(zhuǎn)換為 NaN,然后執(zhí)行 2 - NaN 2 * '5' // 結(jié)果為 10,'5' 首先會變成數(shù)字 5, 然后執(zhí)行 2 * 5
注意:在算術(shù)運(yùn)算中,如果操作數(shù)中有 undefined
,其運(yùn)算結(jié)果是就是 NaN
;null
在算術(shù)運(yùn)算中則是隱式轉(zhuǎn)換為數(shù)值 0
來參與運(yùn)算。
加
為什么加法要區(qū)別對待?因?yàn)?js 中 +
還可以用來拼接字符串。
加法運(yùn)算遵守以下 3 條規(guī)則,優(yōu)先級從高到低
當(dāng)一側(cè)為 String
類型,被識別為字符串拼接,并會優(yōu)先將另一側(cè)轉(zhuǎn)換為字符串類型。
當(dāng)一側(cè)為 Number
類型,另一側(cè)為原始類型,則將原始類型轉(zhuǎn)換為 Number
類型。
當(dāng)一側(cè)為 Number
類型,另一側(cè)為引用類型,將引用類型和 Number
類型轉(zhuǎn)換成字符串后拼接。
示例如下:
123 + '123' // 246 (規(guī)則1) 123 + null // 123 (規(guī)則2) 123 + true // 124 (規(guī)則2) 123 + undefined // NaN (規(guī)則2) 123 + {} // 123[object Object] (規(guī)則3)
邏輯語句中的類型轉(zhuǎn)換
單個(gè)變量
如果只有單個(gè)變量,會先將變量轉(zhuǎn)換為 Boolean
值。只有 null
、undefined
、''
、NaN
、0
、 false
這幾個(gè)會被轉(zhuǎn)換為 false
,其他的情況都是 true
,比如 {}
, []
等。示例如下:
if (null) { console.log('111') } else { console.log('222') } // 輸出 222
使用 == 比較
使用 ==
比較,比較規(guī)則如下:
NaN
和其他任何類型比較永遠(yuǎn)返回 false
(包括和它自己)。
Boolean
和其他任何類型比較,Boolean
首先被轉(zhuǎn)換為 Number
類型。
String
和 Number
比較,先將 String
類型轉(zhuǎn)換為 Number
類型。
null == undefined
比較結(jié)果是 true
,除此之外,null
、undefined
和其他任何類型的比較都為 false
。
原始類型
和 引用類型
比較時(shí),引用類型會依照 ToPrimitive
規(guī)則轉(zhuǎn)換為原始類型。(ToPrimitive 在下面有解釋)
示例如下:
NaN == NaN // false (規(guī)則1) // (規(guī)則2) true == 1 // true true == '1' // true true == '2' // false true == ['1'] // true, 先把 true 變成 1, ['1'] 拆箱成 '1', 再參考(規(guī)則3) true == ['2'] // false, 同上 // (規(guī)則3) 123 == '123' // true '' == 0 // true // (規(guī)則4) null == undefined // true null == '' // false null == 0 // false null == false // false undefined == '' // false undefined == 0 // false undefined == false // false // (規(guī)則5) '[object Object]' == {} // true, 字符串和對象比較,對象通過 toString 得到一個(gè)基本類型值 '1,2,3' == [1,2,3] // true, 同上,[1,2,3] 通過 toString 得到一個(gè)基本類型值
ToPrimitive
ToPrimitive
規(guī)則會嘗試調(diào)用對象的 valueOf
和 toString
方法,將參數(shù)轉(zhuǎn)換為原始類型。
當(dāng)對象類型需要轉(zhuǎn)為原始類型時(shí),它會先查找對象的 valueOf
方法,如果 valueOf
方法返回原始類型的值,則 ToPrimitive
的結(jié)果就是這個(gè)值,如果 valueOf
不存在或者 valueOf
方法返回的不是原始類型的值,就會嘗試調(diào)用對象的 toString
方法,也就是會遵循對象的 ToString
規(guī)則,然后使用toString
的返回值作為 ToPrimitive
的結(jié)果。
示例如下:
let str = new String(1) // 通過 new String 創(chuàng)建了一個(gè)對象 console.log(typeof str) // object console.log(str.valueOf()) // "1" console.log(typeof str.valueOf()) // string const obj = { valueOf() { return 1 }, toString() { return 2 } } console.log(Number(obj)) // 1
注意:如果 valueOf
和 toString
都沒有返回原始類型的值,則會拋出異常。
示例如下:
const obj = { valueOf() { return [] }, toString() { return {} } } console.log(Number(obj)) // TypeError: Cannot convert object to primitive value
特殊:
String({}) // [object Object] Number([]) // 0
String({})
空對象會先調(diào)用 valueOf
,但返回的是對象本身 {}
,不是原始類型,所以會繼續(xù)調(diào)用toString
,得到 [object Object]
,String([object Object])
,所以轉(zhuǎn)換后的結(jié)果為 [object Object]
。
Number([])
空數(shù)組會先調(diào)用 valueOf
,但返回的是數(shù)組本身 []
,不是原始類型,所以會繼續(xù)調(diào)用toString
,得到 ''
,相當(dāng)于 Number('')
,所以轉(zhuǎn)換后的結(jié)果為 0
。
以上就是JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 隱式類型轉(zhuǎn)換的資料請關(guān)注腳本之家其它相關(guān)文章!
- 淺析JavaScript中的隱式類型轉(zhuǎn)換
- JavaScript隱式類型轉(zhuǎn)換
- 總結(jié)Javascript中的隱式類型轉(zhuǎn)換
- 對存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)
- JavaScript中運(yùn)算符規(guī)則和隱式類型轉(zhuǎn)換示例詳解
- JS面試題大坑之隱式類型轉(zhuǎn)換實(shí)例代碼
- 有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
- JavaScript隱式類型轉(zhuǎn)換代碼實(shí)例
- JavaScript隱式類型轉(zhuǎn)換例子總結(jié)
- 淺析JavaScript中的隱式類型轉(zhuǎn)換
- JS不同運(yùn)算符下隱式類型轉(zhuǎn)換的實(shí)現(xiàn)示例
相關(guān)文章
讓iframe自適應(yīng)高度(支持XHTML,支持FF)
讓iframe自適應(yīng)高度(支持XHTML,支持FF)...2007-07-07JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09js控制再次點(diǎn)擊按鈕之間的間隔時(shí)間可防止重復(fù)提交
使用js控制再次點(diǎn)擊按鈕之間的間隔時(shí)間可防止重復(fù)提交,需要的朋友可以參考下2014-08-08JavaScript高階API數(shù)組reduce函數(shù)使用示例
這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對回調(diào)函數(shù)概念的理解,需要的朋友可以參考下2014-09-09