JavaScript這門語言的類型系統(tǒng)從來沒有它表面看起來的那樣和善，雖然比起Java、C#等一眾強(qiáng)類型語言，它的弱類型使用起來似乎是如此便利，但正因?yàn)樗鼧O高的自由度，所以才會(huì)衍生出令人摸不著頭腦的荒誕行為。
舉個(gè)例子，雖然我們都知道一個(gè)包含內(nèi)容的字符串會(huì)被認(rèn)為是“真值 Truthy”（因?yàn)槌丝兆址馊魏巫址贘S里都被認(rèn)為真值），但當(dāng)你做如下比較的時(shí)候，你會(huì)得到一個(gè)驚掉下巴的結(jié)果
const a = "18";
const b = true;
a == b // false
什么鬼，一個(gè)被通常理解成真值的值，竟然無法與布爾真值松散相等？
為了能撥開JavaScript類型的迷霧，讓頭鐵的我們一點(diǎn)一點(diǎn)理順JavaScript整個(gè)類型系統(tǒng)的工作邏輯。
讀者可以根據(jù)自己對(duì)JS類型系統(tǒng)的掌握程度，選擇性的閱讀這篇博客
類型基礎(chǔ)
JavaScript有以下八大類型，除了object類型，其他都為基本類型
number
string
boolean
null
undefined
object
symbol
bigint
他們的類型都可以直接被typeof識(shí)別，特例是
雖然你可能已經(jīng)為這種特例所不解，但其實(shí)這才剛開始，大的還在后面
類型轉(zhuǎn)換
轉(zhuǎn)換為數(shù)字
JavaScript內(nèi)部有一套抽象的數(shù)字轉(zhuǎn)換機(jī)制叫ToNumber，這套機(jī)制在隱式轉(zhuǎn)換或者部分顯式轉(zhuǎn)換其他類型值到數(shù)字時(shí)會(huì)被調(diào)用。雖然你可能會(huì)被惡心到，但我還是要向你介紹這套機(jī)制的規(guī)則為
ToNumber的轉(zhuǎn)換規(guī)則會(huì)在以下情況下使用，當(dāng)然這些情況也可以稱作轉(zhuǎn)換數(shù)字的“技巧”，看你怎么理解它了：
沒錯(cuò)，Math.floor(true)、+ true、true * 1都等于1，是不是覺得很荒誕？
但'5' + 3或者5 + '3'結(jié)果都是字符串'53'，因?yàn)?code style="box-sizing: inherit; font-family: Consolas, monospace, sans-serif !important; font-size: 0.935em !important; padding: 0px 5px; line-height: 1.8; margin: 0px 3px; display: inline-block; overflow-x: auto; vertical-align: middle; border-radius: 3px !important; background: rgb(247, 247, 249) !important; color: rgb(34, 34, 34) !important; border: none rgb(255, 255, 255) !important; overflow-wrap: break-word !important;">+在有兩個(gè)操作值，且其中一個(gè)為字符串時(shí)，會(huì)直接做字符串拼接。所以雖然+ '3'結(jié)果為數(shù)字3，但5 + '3'的結(jié)果不是8
parseInt()或parseFloat()只接受string類型，所以轉(zhuǎn)換規(guī)則與ToNumber轉(zhuǎn)換機(jī)制下的string類型情況相似，但是在處理字符時(shí)采取從左到右的掃描直到失敗為止的方法，所以parseInt("123hello")結(jié)果為123
轉(zhuǎn)換為布爾
JavaScript還有一套針對(duì)布爾類型的抽象轉(zhuǎn)換機(jī)制叫ToBoolean。因?yàn)閷?duì)于前端邏輯編寫來講，判斷一個(gè)值是否為真實(shí)在太重要了，JavaScript里變量像薛定諤的貓一樣，處于存在與不存在、真和假的中間態(tài)，所以我們JS開發(fā)者都有一個(gè)奇怪的腦回路，當(dāng)看到一個(gè)字面量值的時(shí)候就開始評(píng)估它是“真值”（Trusy Value）還是“假值”（Falsy Value）。
可是，與物理學(xué)里薛定諤的貓現(xiàn)象相反，JavaScript里對(duì)真假值的定義其實(shí)很簡單，以下的值均為假值：
undefined
null
false
+0、-0、0n和NaN
""
其他均為真值，任何非空字符串、非0數(shù)字、對(duì)象都是真值。
轉(zhuǎn)換其他類型值為布爾類型的方法：
會(huì)隱式的將其他類型值轉(zhuǎn)換為布爾的情況：
恭喜你勇士，讀到這里就代表馬上你就能知道為什么"18" != true了！！！
等價(jià)性
我們都知道，JS當(dāng)中有松散判斷的弱等價(jià)==，和嚴(yán)格判斷的強(qiáng)等價(jià)===兩種判斷等價(jià)方式。強(qiáng)等價(jià)要求兩個(gè)操作值必須為同一類型，且值本身也相等，其行為非常容易預(yù)測(cè)。弱等價(jià)在比較值是否相等前會(huì)嘗試做一些類型轉(zhuǎn)換，盡可能的讓可能為不同類型的兩個(gè)值變得可以判斷。
造成文章開頭神奇判斷結(jié)果的原因就在弱等價(jià)==時(shí)的類型轉(zhuǎn)換策略上，聽我將弱等價(jià)的轉(zhuǎn)換規(guī)則為你娓娓道來
數(shù)字與字符串比較，則將字符串轉(zhuǎn)換為數(shù)字
布爾值與任何其他值作比較，都先將布爾值轉(zhuǎn)換為數(shù)字
null與undefined松散比較結(jié)果相等
對(duì)象與數(shù)字或字符串比較，先調(diào)用對(duì)象的toPrimitive()獲取原始類型值后進(jìn)行比較
所以，"18" == true進(jìn)行比較時(shí)
由于布爾值的比較規(guī)則為將布爾值轉(zhuǎn)換為數(shù)字，ToNumber(true)結(jié)果為數(shù)字1，表達(dá)式變?yōu)?code style="box-sizing: inherit; font-family: Consolas, monospace, sans-serif !important; font-size: 0.935em !important; padding: 0px 5px; line-height: 1.8; margin: 0px 3px; display: inline-block; overflow-x: auto; vertical-align: middle; border-radius: 3px !important; background: rgb(247, 247, 249) !important; color: rgb(34, 34, 34) !important; border: none rgb(255, 255, 255) !important; overflow-wrap: break-word !important;">"18" == 1
又因?yàn)樽址c數(shù)字比較時(shí)字符串應(yīng)轉(zhuǎn)換為數(shù)字，則ToNumber("18")結(jié)果為數(shù)字18
最后表達(dá)式實(shí)際比較18 == 1，結(jié)果為假false
所以沒錯(cuò)，以下表達(dá)式均為真："1" == true，"0" == false，false == ""
結(jié)語
了解這個(gè)例子后你可能會(huì)對(duì)JavaScript語言行為設(shè)計(jì)混亂表達(dá)不滿，但是上述邊界條件可以通過引入TypeScript，避免弱等價(jià)判斷轉(zhuǎn)而使用嚴(yán)格等價(jià)，在隱式類型轉(zhuǎn)換之前使用可預(yù)測(cè)行為的轉(zhuǎn)換方法對(duì)值提前進(jìn)行處理。
轉(zhuǎn)自博客園 https://www.cnblogs.com/camwang/p/18242665 作者CamWang
該文章在 2024/6/14 8:46:25 編輯過
400 186 1886
