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

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

先上圖：

==運(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ī)范翻譯成了方便大家看的形式。

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

JS中的值有兩種類(lèi)型：基本類(lèi)型、對(duì)象類(lèi)型。
基本類(lèi)型包括：Undefined、Null、Boolean、Number和String等五種類(lèi)型。
Undefined類(lèi)型和Null類(lèi)型的都只有一個(gè)值，即undefined和null；Boolean類(lèi)型有兩個(gè)值：true和false；Number類(lèi)型的值有很多很多；String類(lèi)型的值有無(wú)數(shù)個(gè)值(理論上)。
所有對(duì)象都有valueOf()和toString()方法，它們繼承自O(shè)bject，當(dāng)然也可能被子類(lèi)重寫(xiě)。
現(xiàn)在考慮表達(dá)式：

x == y
其中x和y是六種類(lèi)型中某一種類(lèi)型的值。

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

一. 有和無(wú)

在圖1中，JavaScript值的六種類(lèi)型用藍(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è)的四種類(lèi)型都是確定的、有和非空。我們可以這樣說(shuō)：

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

二. 空和空

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

假如你打算把一個(gè)變量賦予對(duì)象類(lèi)型的值，但是現(xiàn)在還沒(méi)有賦值，那么你可以用null表示此時(shí)的狀態(tài)(證據(jù)之一就是typeof null 的結(jié)果是'object')；相反，假如你打算把一個(gè)變量賦予原始類(lèi)型的值，但是現(xiàn)在還沒(méi)有賦值，那么你可以用undefined表示此時(shí)的狀態(tài)。
不管這個(gè)傳聞是否可信，它們兩者做==比較的結(jié)果是true也是很合理的。(即圖1中右側(cè)垂直線(xiàn)上標(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ù)字。它是ES規(guī)范中的抽象操作，但我們可以用JS中的Number()函數(shù)來(lái)等價(jià)替代。
P表示ToPrimitive操作，即將操作數(shù)轉(zhuǎn)為原始類(lèi)型的值。它也是ES規(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類(lèi)型的對(duì)象，它會(huì)先調(diào)用toString()方法.

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

三. 真與假

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

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

四. 字符的序列

在圖1中，我們把String和Number分成了一組。為什么呢？在六種類(lèi)型中，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ù)雜，但是大體來(lái)說(shuō)，就是把字符串兩邊的引號(hào)去掉，然后看看它能否組成一個(gè)合法的數(shù)字。如果是，轉(zhuǎn)化結(jié)果就是這個(gè)數(shù)字；否則，結(jié)果是NaN。例如：

Number('123') // 結(jié)果123
Number('1.2e3') // 結(jié)果1200
Number('123abc') // 結(jié)果NaN
當(dāng)然也有例外，比如空字符串轉(zhuǎn)化為數(shù)字的結(jié)果是0。即

Number('') // 結(jié)果0

五. 單純與復(fù)雜

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

但是，有時(shí)候事情復(fù)雜了也不是好事。比如一篇長(zhǎng)長(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)置類(lèi)型中，valueOf()方法返回?cái)?shù)字的只有Number和Date。

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

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

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

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

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

七. 勉強(qiáng)舉個(gè)栗子

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

例，計(jì)算下面：

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

[''] == 0
兩個(gè)操作數(shù)變成了對(duì)象類(lèi)型和數(shù)字類(lèi)型。根據(jù)圖1，需要將對(duì)象類(lèi)型轉(zhuǎn)為原始類(lèi)型：

首先調(diào)用[].valueOf()，由于數(shù)組的valueOf()方法返回自身，所以結(jié)果不是原始類(lèi)型，繼續(xù)調(diào)用[].toString()。
對(duì)于數(shù)組來(lái)說(shuō)，toString()方法的算法，是將每個(gè)元素都轉(zhuǎn)為字符串類(lèi)型，然后用','依次連接起來(lái)，所以最終結(jié)果是空字符串''，它是一個(gè)原始類(lèi)型的值。
此時(shí)，表達(dá)式變?yōu)椋?/p>

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

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

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

八. 總結(jié)一下

前面說(shuō)得很亂，在這里再總結(jié)一下圖1中表達(dá)的==運(yùn)算的規(guī)則：

undefined == null的結(jié)果是true。它倆與其他所有值比較的結(jié)果都是false。
字符串 == 數(shù)字時(shí)，字符串轉(zhuǎn)為數(shù)字。
布爾值 == 其他類(lèi)型時(shí)，布爾值轉(zhuǎn)為數(shù)字。
對(duì)象 == 數(shù)字/字符串時(shí)，對(duì)象轉(zhuǎn)為基本類(lèi)型。
最后，把圖改了一下，僅供娛樂(lè) : )

OK，結(jié)束了。如果你覺(jué)得這篇文章對(duì)你有用，請(qǐng)點(diǎn)贊，讓更多的人看到。
另外，文章中的謬誤，請(qǐng)不吝指出。

最新評(píng)論