談?wù)凧avaScript令人迷惑的==與+
前言
相信很多學(xué)習(xí)過(guò)JavaScript的小伙伴都對(duì)JavaScript的==與+有一些疑惑,經(jīng)常會(huì)出現(xiàn)結(jié)果與自己想象不一樣的情況,而且也沒(méi)找到一個(gè)通用的方法,只能死記硬背,非常難受。(咦,這不就是說(shuō)的我嘛,嘻嘻嘻)今天就一起來(lái)揭開它們的神秘面紗,徹底解決掉他們。
正式開始之前,先來(lái)小試牛刀一下:
null == undefined;
[] == [];
'23'= 23;
45 == [45];
false == undefined;
"" == [null];
{} + {};
false + 1
ToPrimitive函數(shù)
ToPrimitive是一個(gè)內(nèi)部函數(shù),用于處理類型轉(zhuǎn)換,從字面意思就知道這個(gè)函數(shù)的就是將變量轉(zhuǎn)化為基本類型的一個(gè)函數(shù)。
ToPrimitive(input, PreferredType)
第一個(gè)參數(shù)是 input,表示要轉(zhuǎn)化的值;
第二個(gè)參數(shù)是PreferredType,表示希望轉(zhuǎn)換成的類型,可為Number/String。
<p style="color:red">當(dāng)input是日期類型時(shí),PreferredType為String,其余情況下都相當(dāng)于傳入Number。</p>
當(dāng)PreferredType傳入?yún)?shù)時(shí)處理步驟會(huì)有差異,處理步驟分別如下:
1.PreferredType傳入Number
(1). 如果input為基本類型,直接返回;
(2). 否則,調(diào)用valueOf方法,如果得到一個(gè)基本類值直接返回;
(3). 否則,調(diào)用toString方法,如果得到一個(gè)基本類值直接返回;
(4). 否則,JavaScript 拋出一個(gè)類型異常錯(cuò)誤。
2.PreferredType傳入String
(1). 如果input為基本類型,直接返回;
(2). 否則,調(diào)用toString方法,如果得到一個(gè)基本類值直接返回;
(3). 否則,調(diào)用valueOf方法,如果得到一個(gè)基本類值直接返回;
(4). 否則,JavaScript 拋出一個(gè)類型異常錯(cuò)誤。
==
上述介紹了ToPrimitive函數(shù),那么對(duì)于==的結(jié)果就能有一個(gè)清晰的認(rèn)知。
我先給出一個(gè)判斷邏輯,然后再以例子進(jìn)行具體分析:
1.兩邊類型一致時(shí),基本變量就直接進(jìn)行值比較,相同則為true,不同則為false,引用變量如果兩邊都指向同一個(gè)內(nèi)存地址那么返回true,否則返回false。
<p style="color:red">特別情況:</p>
null == undefined //true 可以理解為兩值都為無(wú)效的值,所以內(nèi)部認(rèn)為并無(wú)不同,所以相等 NaN == NaN //false //如果兩個(gè)symbol變量不指向同一內(nèi)存空間那么永為false,否則為true
2.兩邊類型不一致:
(1). 先調(diào)用ToPrimitive()返回基本類型;
(2). 若類型不一致,則調(diào)用ToNumber();( 這里的ToNumber也是一個(gè)內(nèi)部函數(shù),可將值轉(zhuǎn)化為數(shù)字型 )
舉兩個(gè)例子吧:
false == undefined //true //false調(diào)用ToPrimitive返回false //undefined調(diào)用ToPrimitive返回undefined //false調(diào)用ToNumber返回0 //undefined調(diào)用ToNumber返回0
45 == [45] //true //45調(diào)用ToPrimitive返回45 //[45]調(diào)用ToPrimitive返回"45" //45調(diào)用ToNumber返回45 //"45"調(diào)用ToNumber返回45
+
一元操作運(yùn)算符+
+作為一元操作運(yùn)算符邏輯比較簡(jiǎn)單:先調(diào)用ToPrimitive,后調(diào)用ToNumber
+['1'] //1 //['1']調(diào)用ToPrimitive返回"1" //"1"調(diào)用ToNumber返回1
+{} //NaN
//{}調(diào)用ToPrimitive返回"[object Object]"
//"[object Object]"調(diào)用ToNumber返回NaN
二元操作運(yùn)算符+
+作為二元操作運(yùn)算符邏輯如下:
- 兩個(gè)值分別調(diào)用ToPrimitive;
- 如果兩個(gè)的返回值中有一個(gè)為字符串類型,則返回兩個(gè)值toString的拼接結(jié)果;
- 否則返回toNumber相加的結(jié)果
null + 1 //1 //null調(diào)用ToPrimitive返回null //1調(diào)用ToPrimitive返回1 //null調(diào)用ToNumber返回0 //1調(diào)用ToNumber返回1 //0 + 1 = 1
[1, 2] + [3, 4] //"1,23,4" //[1, 2]調(diào)用ToPrimitive返回"1,2" //[3, 4]調(diào)用ToPrimitive返回"3,4" //"1,2"調(diào)用toString返回"1,2" //"3,4"調(diào)用toString返回"3,4" //"1,2" + "3,4" = "1,23,4"
以上就是談?wù)凧avaScript令人迷惑的==與+的詳細(xì)內(nèi)容,更多關(guān)于JavaScript ==和+的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript中全局對(duì)象的parseInt()方法使用介紹
全局對(duì)象的parseInt()方法該如何使用,下面為大家詳細(xì)介紹下,感興趣的朋友不要錯(cuò)過(guò)2013-12-12
Javascript base64編碼實(shí)現(xiàn)代碼
Javascript base64編碼實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-12-12
javascript自啟動(dòng)函數(shù)的問(wèn)題探討
自啟動(dòng)函數(shù)想必大家并不陌生吧,在本文將為大家詳細(xì)探討下,感興趣的朋友可不要錯(cuò)過(guò)2013-10-10
JavaScript之Map和Set_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之Map和Set的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
JS利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用Canvas實(shí)現(xiàn)文字水印和圖片水印合成的效果,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2022-11-11
TypeScript遍歷Array的方法(for,forEach,every)
本文主要介紹了TypeScript遍歷Array的方法(for,forEach,every),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
這篇文章主要介紹了jquery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析,本文給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
配置eslint規(guī)范項(xiàng)目代碼風(fēng)格
這篇文章主要介紹了配置eslint規(guī)范項(xiàng)目代碼風(fēng)格,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
JavaScript如何將base64圖片轉(zhuǎn)化為URL格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的相關(guān)資料,Base64是一種編碼方式,而不是真正的加密方式,即使算Base64也僅用作一個(gè)簡(jiǎn)單的加密來(lái)保護(hù)某些數(shù)據(jù),而真正的加密通常都比較繁瑣,需要的朋友可以參考下2023-07-07

