首頁(yè)技術(shù)文章正文

徹底搞懂JS的==運(yùn)算

更新時(shí)間:2018-07-24 來(lái)源:黑馬程序員 瀏覽量:

  大家知道,==是JavaScript中比較復(fù)雜的一個(gè)運(yùn)算符。它的運(yùn)算規(guī)則奇怪,容易讓人犯錯(cuò),從而成為JavaScript中“最糟糕的特性”之一。

在仔細(xì)閱讀了ECMAScript規(guī)范的基礎(chǔ)上,我畫(huà)了一張圖,我想通過(guò)它你會(huì)徹底地搞清楚關(guān)于==的一切。同時(shí),我也試圖通過(guò)此文向大家證明==并不是那么糟糕的東西,它很容易掌握,甚至看起來(lái)很合理。

先上圖:
1532418763197_21.jpg

圖1 ==運(yùn)算規(guī)則的圖形化表示

  ==運(yùn)算規(guī)則的精確描述在此:The Abstract Equality Comparison Algorithm。但是,這么復(fù)雜的描述,你確定看完后腦子不暈?確定立馬就能拿它指導(dǎo)實(shí)踐?

  肯定不行,規(guī)范畢竟是給JavaScript運(yùn)行環(huán)境的開(kāi)發(fā)人員看的(比如V8引擎的開(kāi)發(fā)人員們),而不是給語(yǔ)言的使用者看的。而上圖正是將規(guī)范中復(fù)雜的描述翻譯成了更容易看懂的形式。

  在詳細(xì)介紹圖1中的每個(gè)部分前,我們來(lái)復(fù)習(xí)一下JS中關(guān)于類型的知識(shí):

  JS中的值有兩種類型:原始類型(Primitive)、對(duì)象類型(Object)。

  基本類型包括:Undefined、Null、Boolean、Number和String等五種。

  Undefined類型和Null類型的都只有一個(gè)值,即undefined和null;Boolean類型有兩個(gè)值:true和false;Number類型的值有很多很多;String類型的值理論上有無(wú)數(shù)個(gè)。

  所有對(duì)象都有valueOf()和toString()方法,它們繼承自O(shè)bject,當(dāng)然也可能被子類重寫(xiě)。


現(xiàn)在考慮表達(dá)式:

x == y

其中x和y是上述六種類型中某一種類型的值。

當(dāng)x和y的類型相同時(shí),x == y可以轉(zhuǎn)化為x === y,而后者是很簡(jiǎn)單的(唯一需要注意的可能是NaN),所以下面我們只考慮x和y的類型不同的情況。

一. 有和無(wú)

  在圖1中,JavaScript值的六種類型用藍(lán)底色的矩形表示。它們首先被分成了兩組:

  String、Number、Boolean和Object (對(duì)應(yīng)左側(cè)的大矩形框)

  Undefined和Null (對(duì)應(yīng)右側(cè)的矩形框)


  分組的依據(jù)是什么?
  我們來(lái)看一下,右側(cè)的Undefined和Null是用來(lái)表示不確定、無(wú)或者空的,而右側(cè)的四種類型都是確定的、有和非空。我們可以這樣說(shuō):

  左側(cè)是一個(gè)存在的世界,右側(cè)是一個(gè)空的世界。

  所以,左右兩個(gè)世界中的任意值做==比較的結(jié)果都是false是很合理的。(見(jiàn)圖1中連接兩個(gè)矩形的水平線上標(biāo)的false)

二. 空和空

  JavaScript中的undefined和null是另一個(gè)經(jīng)常讓我們崩潰的地方。通常它被認(rèn)為是一個(gè)設(shè)計(jì)缺陷,這一點(diǎn)我們不去深究。不過(guò)我曾聽(tīng)說(shuō),    JavaScript的作者最初是這樣想的:

  假如你打算把一個(gè)變量賦予對(duì)象類型的值,但是現(xiàn)在還沒(méi)有賦值,那么你可以用null表示此時(shí)的狀態(tài)(證據(jù)之一就是typeof null 的結(jié)果是'object');相反,假如你打算把一個(gè)變量賦予原始類型的值,但是現(xiàn)在還沒(méi)有賦值,那么你可以用undefined表示此時(shí)的狀態(tài)。

不管這個(gè)傳聞是否可信,它們兩者做==比較的結(jié)果是true是很合理的。(見(jiàn)圖1中右側(cè)垂直線上標(biāo)的true)

  在進(jìn)行下一步之前,我們先來(lái)說(shuō)一下圖1中的兩個(gè)符號(hào):大寫(xiě)字母N和P。這兩個(gè)符號(hào)并不是PN結(jié)中正和負(fù)的意思。而是:

N表示ToNumber操作,即將操作數(shù)轉(zhuǎn)為數(shù)字。它是規(guī)范中的抽象操作,但我們可以用JS中的Number()函數(shù)來(lái)等價(jià)替代。

P表示ToPrimitive操作,即將操作數(shù)轉(zhuǎn)為原始類型的值。它也是規(guī)范中的抽象操作,同樣也可以翻譯成等價(jià)的JS代碼。不過(guò)稍微復(fù)雜一些,簡(jiǎn)單說(shuō)來(lái),對(duì)于一個(gè)對(duì)象obj:


ToPrimitive(obj)等價(jià)于:先計(jì)算obj.valueOf(),如果結(jié)果為原始值,則返回此結(jié)果;否則,計(jì)算obj.toString(),如果結(jié)果是原始值,則返回此結(jié)果;否則,拋出異常。

注:此處有個(gè)例外,即Date類型的對(duì)象,它會(huì)先調(diào)用toString()方法,后調(diào)用valueOf()方法。

在圖1中,標(biāo)有N或P的線表示:當(dāng)它連接的兩種類型的數(shù)據(jù)做==運(yùn)算時(shí),標(biāo)有N或P的那一邊的操作數(shù)要先執(zhí)行ToNumber或ToPrimitive變換。

三. 真與假

  從圖1可以看出,當(dāng)布爾值與其他類型的值作比較時(shí),布爾值會(huì)轉(zhuǎn)化為數(shù)字,具體來(lái)說(shuō)

true -> 1false -> 0

  這一點(diǎn)也不需浪費(fèi)過(guò)多口舌。想一下在C語(yǔ)言中,根本沒(méi)有布爾類型,通常用來(lái)表示邏輯真假的正是整數(shù)1和0。

四. 字符的序列

  在圖1中,我們把String和Number類型分成了一組。為什么呢?在六種類型中,String和Number都是字符的序列(至少在字面上如此)。字符串是所有合法的字符的序列,而數(shù)字可以看成是符合特定條件的字符的序列。所以,數(shù)字可以看成字符串的一個(gè)子集。

  根據(jù)圖1,在字符串和數(shù)字做==運(yùn)算時(shí),需要使用ToNumber操作,把字符串轉(zhuǎn)化為數(shù)字。假設(shè)x是字符串,y是數(shù)字,那么:

x == y -> Number(x) == y

  那么字符串轉(zhuǎn)化為數(shù)字的規(guī)則是怎樣的呢?規(guī)范中描述得很復(fù)雜,但是大致說(shuō)來(lái),就是把字符串兩邊的空白字符去掉,然后把兩邊的引號(hào)去掉,看它能否組成一個(gè)合法的數(shù)字。如果是,轉(zhuǎn)化結(jié)果就是這個(gè)數(shù)字;否則,結(jié)果是NaN。例如:

Number('123') // 結(jié)果123Number('1.2e3') // 結(jié)果1200Number('123abc')// 結(jié)果NaNNumber('\r\n\t123\v\f') // 結(jié)果123

當(dāng)然也有例外,比如空白字符串轉(zhuǎn)化為數(shù)字的結(jié)果是0。即

Number('') // 結(jié)果0Number('\r\n\t \v\f') // 結(jié)果0

五. 單純與復(fù)雜

  原始類型是一種單純的類型,它們直接了當(dāng)、容易理解。然而缺點(diǎn)是表達(dá)能力有限,難以擴(kuò)展,所以就有了對(duì)象。對(duì)象是屬性的集合,而屬性本身又可以是對(duì)象。所以對(duì)象可以被構(gòu)造得任意復(fù)雜,足以表示各種各樣的事物。

  但是,有時(shí)候事情復(fù)雜了也不是好事。比如一篇冗長(zhǎng)的論文,并不是每個(gè)人都有時(shí)間、有耐心或有必要從頭到尾讀一遍,通常只了解其中心思想就夠了。于是論文就有了關(guān)鍵字、概述。JavaScript中的對(duì)象也一樣,我們需要有一種手段了解它的主要特征,于是對(duì)象就有了toString()和valueOf()方法。

toString()方法用來(lái)得到對(duì)象的一段文字描述;而valueOf()方法用來(lái)得到對(duì)象的特征值。

  當(dāng)然,這只是我自己的理解。顧名思義,toString()方法傾向于返回一個(gè)字符串。那么valueOf()方法呢?根據(jù)規(guī)范中的描述,它傾向于返回一個(gè)數(shù)字——盡管內(nèi)置類型中,valueOf()方法返回?cái)?shù)字的只有Number和Date。

根據(jù)圖1,當(dāng)一個(gè)對(duì)象與一個(gè)非對(duì)象比較時(shí),需要將對(duì)象轉(zhuǎn)化為原始類型(雖然與布爾類型比較時(shí),需要先將布爾類型變成數(shù)字類型,但是接下來(lái)還是要將對(duì)象類型變成原始類型)。這也是合理的,畢竟==是不嚴(yán)格的相等比較,我們只需要取出對(duì)象的主要特征來(lái)參與運(yùn)算,次要特征放在一邊就行了。

六. 萬(wàn)物皆數(shù)

  我們回過(guò)頭來(lái)看一下圖1。里面標(biāo)有N或P的那幾條連線是沒(méi)有方向的。假如我們?cè)谶@些線上標(biāo)上箭頭,使得連線從標(biāo)有N或P的那一端指向另一端,那么會(huì)得到(不考慮undefined和null):

1532418781994_22.jpg

圖2 ==運(yùn)算過(guò)程中類型轉(zhuǎn)化的趨勢(shì)

  發(fā)現(xiàn)什么了嗎?對(duì),在運(yùn)算過(guò)程中,所有類型的值都有一種向數(shù)字類型轉(zhuǎn)化的趨勢(shì)。畢竟曾經(jīng)有名人說(shuō)過(guò):

萬(wàn)物皆數(shù)。

七. 舉個(gè)栗子

  前面廢話太多了,這里還是舉個(gè)例子,來(lái)證明圖1確實(shí)是方便有效可以指導(dǎo)實(shí)踐的。

例,計(jì)算下面表達(dá)式的值:

[''] == false

  首先,兩個(gè)操作數(shù)分別是對(duì)象類型、布爾類型。根據(jù)圖1,需要將布爾類型轉(zhuǎn)為數(shù)字類型,而false轉(zhuǎn)為數(shù)字的結(jié)果是0,所以表達(dá)式變?yōu)椋?/p>

[''] == 0

  兩個(gè)操作數(shù)變成了對(duì)象類型、數(shù)字類型。根據(jù)圖1,需要將對(duì)象類型轉(zhuǎn)為原始類型:

  首先調(diào)用[].valueOf(),由于數(shù)組的valueOf()方法返回自身,所以結(jié)果不是原始類型,繼續(xù)調(diào)用[].toString()。

  對(duì)于數(shù)組來(lái)說(shuō),toString()方法的算法,是將每個(gè)元素都轉(zhuǎn)為字符串類型,然后用逗號(hào)','依次連接起來(lái),所以最終結(jié)果是空字符串'',它是一個(gè)原始類型的值。


  此時(shí),表達(dá)式變?yōu)椋?/p>

'' == 0

  兩個(gè)操作數(shù)變成了字符串類型、數(shù)字類型。根據(jù)圖1,需要將字符串類型轉(zhuǎn)為數(shù)字類型,前面說(shuō)了空字符串變成數(shù)字是0。于是表達(dá)式變?yōu)椋?/p>

0 == 0

  到此為止,兩個(gè)操作數(shù)的類型終于相同了,結(jié)果明顯是true。

  從這個(gè)例子可以看出,要想掌握==運(yùn)算的規(guī)則,除了牢記圖1外,還需要記住那些內(nèi)置對(duì)象的toString()和valueOf()方法的規(guī)則。包括Object、Array、Date、Number、String、Boolean等,幸好這沒(méi)有什么難度。

八. 再次變形

  其實(shí),圖一還不夠完美。為什么呢?因?yàn)閷?duì)象與字符串/數(shù)字比較時(shí)都由對(duì)象來(lái)轉(zhuǎn)型,但是與同樣是原始類型的布爾類型比較時(shí)卻需要布爾類型轉(zhuǎn)型。實(shí)際上,只要稍稍分析一下,全部讓對(duì)象來(lái)轉(zhuǎn)為原始類型也是等價(jià)的。所以我們得到了最終的更加完美的圖形:

1532418787525_23.jpg

圖3 更完美的==運(yùn)算規(guī)則的圖形化表示

  有一個(gè)地方可能讓你疑惑:為什么Boolean與String之間標(biāo)了兩個(gè)N?雖然按照規(guī)則應(yīng)該是由Boolean轉(zhuǎn)為數(shù)字,但是下一步String就要轉(zhuǎn)為數(shù)字了,所以干脆不如兩邊同時(shí)轉(zhuǎn)成數(shù)字。

九. 總結(jié)一下

  前面說(shuō)得很亂,根據(jù)我們得到的最終的圖3,我們總結(jié)一下==運(yùn)算的規(guī)則:

undefined == null,結(jié)果是true。且它倆與所有其他值比較的結(jié)果都是false。

String == Boolean,需要兩個(gè)操作數(shù)同時(shí)轉(zhuǎn)為Number。

String/Boolean == Number,需要String/Boolean轉(zhuǎn)為Number。

Object == Primitive,需要Object轉(zhuǎn)為Primitive(具體通過(guò)valueOf和toString方法)。



作者:黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)學(xué)院

首發(fā):http://web.itheima.com/

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!