JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false
console.log( [] == ![] ) // true console.log( {} == !{} ) // false
在比較字符串、數(shù)值和布爾值的相等性時(shí),問題還比較簡(jiǎn)單。但在涉及到對(duì)象的比較時(shí),問題就變得復(fù)雜了。最早的ECMAScript中的相等和不相等操作符會(huì)在執(zhí)行比較之前,先將對(duì)象轉(zhuǎn)換成相似的類型。后來,有人提出了這種轉(zhuǎn)換到底是否合理的質(zhì)疑。最后,ECMAScript的解決方案就是提供兩組操作符:
相等和不相等——先轉(zhuǎn)換再比較 (==)
全等和不全等——僅比較而不轉(zhuǎn)換 (===)
ECMAScript中相等操作符由兩個(gè)等于號(hào)(==)表示,如果兩個(gè)操作數(shù)相等,則返回true,這種操作符都會(huì)先轉(zhuǎn)換操作數(shù)(通常稱為強(qiáng)制轉(zhuǎn)型),然后再比較它們的相等性
在轉(zhuǎn)換不同的數(shù)據(jù)類型時(shí),對(duì)于相等和不相等操作符:在JS高程中一書中給出如下的基本轉(zhuǎn)換規(guī)則
①、如果有一個(gè)操作數(shù)是布爾值,則在比較相等性之前先將其轉(zhuǎn)換為數(shù)值——false轉(zhuǎn)換為0,而true轉(zhuǎn)換為1;
②、如果一個(gè)操作數(shù)是字符串,另一個(gè)操作數(shù)是數(shù)值,在比較相等性之前先將字符串轉(zhuǎn)換為數(shù)值
③、如果一個(gè)操作數(shù)是對(duì)象,另一個(gè)操作數(shù)不是,則調(diào)用對(duì)象的valueOf()方法,用得到的基本類型值按照前面的規(guī)則進(jìn)行比較
這兩個(gè)操作符在進(jìn)行比較時(shí)則要遵循下列規(guī)則。
①、null 和undefined 是相等的
②、要比較相等性之前,不能將null 和 undefined 轉(zhuǎn)換成其他任何值
③、如果有一個(gè)操作數(shù)是NaN,則相等操作符返回 false ,而不相等操作符返回 true。重要提示:即使兩個(gè)操作數(shù)都是NaN,相等操作符也返回 false了;因?yàn)榘凑找?guī)則, NaN 不等于 NaN
④、如果兩個(gè)操作數(shù)都是對(duì)象,則比較它們是不是同一個(gè)對(duì)象,如果兩個(gè)操作數(shù)都指向同一個(gè)對(duì)象,則相等操作符返回 true;否則, 返回false
這里說一下題外話:[] 和 {} 都是屬于引用類型,引用類型是存放在堆內(nèi)存中的,而在棧內(nèi)存中會(huì)有一個(gè)或者多個(gè)地址來指向這個(gè)堆內(nèi)存相對(duì)應(yīng)的數(shù)據(jù)。所以在使用 == 操作符的時(shí)候,對(duì)于引用類型的數(shù)據(jù),比較的是地址,而不是真實(shí)的值。
現(xiàn)在來探討 [] == ! [] 的結(jié)果為什么會(huì)是true
①、根據(jù)運(yùn)算符優(yōu)先級(jí) ,! 的優(yōu)先級(jí)是大于 == 的,所以先會(huì)執(zhí)行 ![]
!可將變量轉(zhuǎn)換成boolean類型,null、undefined、NaN以及空字符串('')取反都為true,其余都為false。
所以 ! [] 運(yùn)算后的結(jié)果就是 false
也就是 [] == ! [] 相當(dāng)于 [] == false
②、根據(jù)上面提到的規(guī)則(如果有一個(gè)操作數(shù)是布爾值,則在比較相等性之前先將其轉(zhuǎn)換為數(shù)值——false轉(zhuǎn)換為0,而true轉(zhuǎn)換為1),則需要把 false 轉(zhuǎn)成 0
也就是 [] == ! [] 相當(dāng)于 [] == false 相當(dāng)于 [] == 0
③、根據(jù)上面提到的規(guī)則(如果一個(gè)操作數(shù)是對(duì)象,另一個(gè)操作數(shù)不是,則調(diào)用對(duì)象的valueOf()方法,用得到的基本類型值按照前面的規(guī)則進(jìn)行比較,如果對(duì)象沒有valueOf()方法,則調(diào)用 toString())
而對(duì)于空數(shù)組,[].toString() -> '' (返回的是空字符串)
也就是 [] == 0 相當(dāng)于 '' == 0
④、根據(jù)上面提到的規(guī)則(如果一個(gè)操作數(shù)是字符串,另一個(gè)操作數(shù)是數(shù)值,在比較相等性之前先將字符串轉(zhuǎn)換為數(shù)值)
Number('') -> 返回的是 0
相當(dāng)于 0 == 0 自然就返回 true了
總結(jié)一下:
[] == ! [] -> [] == false -> [] == 0 -> '' == 0 -> 0 == 0 -> true
那么對(duì)于 {} == !{} 也是同理的
關(guān)鍵在于 {}.toString() -> NaN(返回的是NaN)
根據(jù)上面的規(guī)則(如果有一個(gè)操作數(shù)是NaN,則相等操作符返回 false)
總結(jié)一下:
{} == ! {} -> {} == false -> {} == 0 -> NaN == 0 -> false
那么相信大家對(duì)下面的兩道題就信手拈來了
console.log( [] == !{} ) // true console.log( {} == ![] ) // false
總結(jié)
到此這篇關(guān)于JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false的文章就介紹到這了,更多相關(guān)JS [] == ![]結(jié)果為true內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS.GetAllChild(element,deep,condition)使用介紹
JS.GetAllChild()獲取所有子節(jié)點(diǎn),想必大家都知道吧,具體的使用方法如下,感興趣的朋友可以參考下2013-09-09有關(guān)文件上傳 非ajax提交 得到后臺(tái)數(shù)據(jù)問題
本文給大家介紹關(guān)于文件上傳非ajax提交得到后臺(tái)數(shù)據(jù)的問題我們?cè)撛趺刺幚砟??下文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2016-10-10div+css+js模擬tab切換效果 事件綁定 IE,firefox兼容
div+css+js模擬tab,這個(gè)版本,理論上可以添加無限個(gè)tab,而且,你只要管內(nèi)容的添加行了,不需要改JS2009-12-12js實(shí)現(xiàn)隨機(jī)點(diǎn)名功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12實(shí)現(xiàn)png圖片和png背景透明(支持多瀏覽器)的方法
Firefox和Opera對(duì)PNG的支持非常的好,都是IE卻無視PNG圖片這一特性的“存在”,雖然IE7已經(jīng)支持都是IE6還是不行。2009-09-09