摘要：讓我們快速的復(fù)習(xí)一下在中一共有兩種類型的值原始值和對(duì)象值原始值有布爾值數(shù)字還有字符串其他的所有值都是對(duì)象類型的值包括數(shù)組和函數(shù)類型轉(zhuǎn)化先按運(yùn)算符來(lái)分一下類減號(hào)，乘號(hào)，肯定是進(jìn)行數(shù)學(xué)運(yùn)算，所以操作數(shù)需轉(zhuǎn)化為類型。

很多小伙伴們覺(jué)得javaScript很簡(jiǎn)單,下面的這行 javaScript代碼可能會(huì)讓你懷疑人生。

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

小伙伴們學(xué)會(huì)了，以后遇到一些講不通道理,讓你不開森的人就把這段代碼發(fā)給他。

那么這段代碼為什么會(huì)輸出sb呢？

其實(shí)這段代碼考的是js的類型轉(zhuǎn)化的一些基本原理

首先要運(yùn)用到的第一個(gè)知識(shí)就是js運(yùn)算符的優(yōu)先級(jí)，因?yàn)檫@么長(zhǎng)一段運(yùn)算看的人眼花，我們必須得先根據(jù)優(yōu)先級(jí)分成n小段，然后再各個(gè)擊破

優(yōu)先級(jí)的排列如下表：

　　優(yōu)先級(jí)從高到低：

根據(jù)此規(guī)則，我們把這一串運(yùn)算分為以下16個(gè)子表達(dá)式：

運(yùn)算符用紅色標(biāo)出，有一點(diǎn)可能大家會(huì)意識(shí)不到，其實(shí)中括號(hào)[]也是一個(gè)運(yùn)算符，用來(lái)通過(guò)索引訪問(wèn)數(shù)組項(xiàng)，另外也可以訪問(wèn)字符串的子字符，有點(diǎn)類似charAt方法，如："abcd"[1] // 返回"b"。而且中括號(hào)的優(yōu)先級(jí)還是最高的哦。

接下來(lái)需要運(yùn)用的就是javascript的類型轉(zhuǎn)化知識(shí)了,我們先說(shuō)說(shuō)什么情況下需要進(jìn)行類型轉(zhuǎn)化。當(dāng)操作符兩邊的操作數(shù)類型不一致或者不是基本類型（也叫原始類型）時(shí)，需要進(jìn)行類型轉(zhuǎn)化。

讓我們快速的復(fù)習(xí)一下.在JavaScript中,一共有兩種類型的值:原始值(primitives)和對(duì)象值(objects).

原始值有:undefined, null, 布爾值(booleans), 數(shù)字(numbers),還有字符串(strings).

其他的所有值都是對(duì)象類型的值,包括數(shù)組(arrays)和函數(shù)(functions).

減號(hào)-，乘號(hào)*，肯定是進(jìn)行數(shù)學(xué)運(yùn)算，所以操作數(shù)需轉(zhuǎn)化為number類型。

加號(hào)+，可能是字符串拼接，也可能是數(shù)學(xué)運(yùn)算，所以可能會(huì)轉(zhuǎn)化為number或string

一元運(yùn)算，如+[]，只有一個(gè)操作數(shù)的，轉(zhuǎn)化為number類型

(2).1 對(duì)于非原始類型的，通過(guò)ToPrimitive() 將值轉(zhuǎn)換成原始類型：

　　ToPrimitive(input, PreferredType?)

　　可選參數(shù)PreferredType是Number或者是String。返回值為任何原始值.如果PreferredType是Number,執(zhí)行順序如下：

如果input為primitive，返回

　　否則，input為Object。調(diào)用 obj.valueOf()。如果結(jié)果是primitive,返回。

　　否則，調(diào)用obj.toString(). 如果結(jié)果是primitive,返回

　　否則，拋出TypeError

　　如果 PreferredType是String，步驟2跟3互換，如果PreferredType沒(méi)有，Date實(shí)例被設(shè)置成String，其他都是Number

(2).2 通過(guò)ToNumber()將值轉(zhuǎn)換為數(shù)字

通過(guò)ToNumber()把值轉(zhuǎn)換成Number，直接看ECMA 9.3的表格

如果輸入的值是一個(gè)對(duì)象,則會(huì)首先會(huì)調(diào)用ToPrimitive(obj, Number)將該對(duì)象轉(zhuǎn)換為原始值,然后在調(diào)用ToNumber()將這個(gè)原始值轉(zhuǎn)換為數(shù)字.

(2).3 通過(guò)ToString()將值轉(zhuǎn)換為字符串

通過(guò)ToString()把值轉(zhuǎn)化成字符串， 直接看ECMA 9.8的表格

如果輸入的值是一個(gè)對(duì)象,則會(huì)首先會(huì)調(diào)用ToPrimitive(obj, String)將該對(duì)象轉(zhuǎn)換為原始值,然后再調(diào)用ToString()將這個(gè)原始值轉(zhuǎn)換為字符串.

規(guī)則就這么多，接下來(lái)實(shí)踐一下，根據(jù)我們上面劃分出的子表達(dá)式，一步一步將這個(gè)神奇的代碼給執(zhí)行出來(lái)。開工~

先看最簡(jiǎn)單的子表達(dá)式16：+[]

　　只有一個(gè)操作數(shù)[]，肯定是轉(zhuǎn)化為number了，根據(jù)上面的規(guī)則2，[]是個(gè)數(shù)組，object類型，即對(duì)象。所以得先調(diào)用toPrimitive轉(zhuǎn)化為原始類型，并且PreferredType為number，這個(gè)參數(shù)表示更“傾向于”轉(zhuǎn)化的類型，這里肯定是number了。然后首先調(diào)用數(shù)組的valueOf方法，數(shù)組調(diào)用valueOf會(huì)返回自身，如下：
　　
　　
　　這個(gè)時(shí)候，我們得到一個(gè)空串“”，還沒(méi)有結(jié)束，看上面的規(guī)則2描述，繼續(xù)調(diào)用toNumber，轉(zhuǎn)化為number類型，如下：
　　

大功告成！子表達(dá)式16轉(zhuǎn)化完畢，+[]，最終得到0。

　　來(lái)看子表達(dá)式15：[~+""]

　　空串""前面有兩個(gè)一元操作符，但是操作數(shù)還是只有一個(gè)，所以，最終要轉(zhuǎn)化為的類型是number?？匆?guī)則2吧，空串調(diào)用toNumber得到0。接下來(lái)是~，這是個(gè)什么東東呢？它是位運(yùn)算符，作用可以記為把數(shù)字取負(fù)然后減一，所以~0就是-1 。

　　別忘了，這個(gè)子表達(dá)式外頭還包著中括號(hào)，所以最終的值為[-1]，即一個(gè)數(shù)組，里面只有一個(gè)元素-1.

　　接下來(lái)看子表達(dá)式13就簡(jiǎn)單了，把15、16求出來(lái)的填進(jìn)去，就變成了這樣：---1，取數(shù)組的第0個(gè)元素，然后自減，結(jié)果為-2，是不so easy!

　　繼續(xù)往上走，子表達(dá)式14： [~+[]]

　　其實(shí)把15、和16的原理用上就非常明顯了，答案[-1]

　　繼續(xù)來(lái)求子表達(dá)式9，此刻它已變成：-2[-1]，有稍許不一樣，不過(guò)沒(méi)關(guān)系，我們還是按照規(guī)則來(lái)，運(yùn)算符是乘號(hào)，當(dāng)然是做數(shù)學(xué)運(yùn)算，那后面的[-1]就得轉(zhuǎn)化為number，與16的求法類似，過(guò)程如下：

　?、僬{(diào)用toPrimitive，發(fā)現(xiàn)是object類型

　?、谡{(diào)用valueOf，返回自身[-1]

　?、垡?yàn)椴皇窃碱愋停^續(xù)調(diào)用toString，返回"-1"

　?、?-1"是原始類型了，然后調(diào)用toNumber，返回-1

　?、菖c-2相乘，返回2

　　子表達(dá)式10：~~!+[]，不多說(shuō)了，答案1. 就是從右往左依次一元計(jì)算。

　　有了9和10，我們來(lái)到了子表達(dá)式4，此刻它已經(jīng)長(zhǎng)這樣了：2+1， 好，我不多說(shuō)了。

　　繼續(xù)看表達(dá)式7：!(~+[])，~+[]=-1，這個(gè)根據(jù)上面已經(jīng)知道了，那!-1是什么呢？這里要說(shuō)一下這個(gè)感嘆號(hào)，它是邏輯取非的意思，會(huì)把表達(dá)式轉(zhuǎn)化為布爾類型，轉(zhuǎn)化規(guī)則和js的Truthy和Falsy原則是一樣的，后面跟數(shù)字的，除0以外都為false，后面跟字符串的，除空串以外都為false。這里的!-1當(dāng)然就是false了。

　　接下來(lái)這個(gè)表達(dá)式3：false+{}有點(diǎn)關(guān)鍵。一個(gè)布爾加一個(gè)對(duì)象，那這個(gè){}應(yīng)該先轉(zhuǎn)化為原始類型，流程如下：

　?、僬{(diào)用toPrimitive，發(fā)現(xiàn)是object類型

　　②調(diào)用valueOf，返回自身{}，
　?、鄄皇窃碱愋?，調(diào)用toString，返回"[object Object]"

　?、躥alse與"[object Object]"相加，false先轉(zhuǎn)化為字符串"false"

　?、菹嗉拥媒Y(jié)果"false[object Object]"

　　知道了表達(dá)式3和4，我們就可以來(lái)看表達(dá)式1了，此時(shí)它是這樣的："false[object Object]"[3]，因?yàn)檫@個(gè)[]可以取字符串的子字符，像charAt一樣，所以得到了結(jié)果"s"

　　經(jīng)過(guò)上面艱難的流程，我們拿到了字符"s"，也就是那張圖的左半邊，剩下的那個(gè)"b"，相同的原理可以搞出來(lái)，我這里就不一一演示了，留給你練練吧~

　　回顧一下這個(gè)過(guò)程其實(shí)也不復(fù)雜，只是有一些需要重復(fù)勞動(dòng)的，只要你掌握了運(yùn)算的優(yōu)先級(jí)，能把大串分解成一個(gè)個(gè)小串，然后運(yùn)用類型轉(zhuǎn)化的知識(shí)挨個(gè)處理就搞定了。怎么樣，看到這里你還覺(jué)得神奇嗎？

同樣的，中文字符也是由這樣組成的，跟英文同樣的道理。

https://www.cnblogs.com/ziyun...
https://zhidao.baidu.com/ques...