作者：xixi
鏈接：https://www.cnblogs.com/telnetzhang/p/5629981.htm

一行神奇的js代碼，當時我就震驚了，這不就是傳說中的ZB神奇么… … 哈哈。寫本篇文章的緣由是之前看到了一段js代碼，如下：

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

然后讓大家運行，出來的結果讓人有點出乎意料，"sb"。太風騷了有木有！如果有人詆毀前端瞧不起js的話，那就可以把這段代碼發(fā)給他了~不過話說回來了，這到底是什么原理呢？為什么一堆符號運算結果竟然能是兩個字符，而且恰巧還是個sb！

其實靠的是js的類型轉(zhuǎn)化的一些基本原理，本篇就來揭密”sb”是如何煉成的。相信你如果能把這個理清楚了，以后遇到類型轉(zhuǎn)化之類的題目，就可以瞬間秒殺了。

?一、js運算符的優(yōu)先級

首先要運用到的第一個知識就是js運算符的優(yōu)先級，因為這么長一段運算看的人眼花，我們必須得先根據(jù)優(yōu)先級分成n小段，然后再各個擊破。優(yōu)先級的排列如下表，優(yōu)先級從高到低：

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

運算符用紅色標出，有一點可能大家會意識不到，其實中括號[]也是一個運算符，用來通過索引訪問數(shù)組項，另外也可以訪問字符串的子字符，有點類似charAt方法，如：’abcd'[1] // 返回’b’。而且中括號的優(yōu)先級還是最高的哦。

二、js的類型轉(zhuǎn)化

預處理結束，接下來需要運用的就是JavaScript的類型轉(zhuǎn)化知識了。我們先說說什么情況下需要進行類型轉(zhuǎn)化。

當操作符兩邊的操作數(shù)類型不一致或者不是基本類型（也叫原始類型）時，需要進行類型轉(zhuǎn)化。先按運算符來分一下類：

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

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

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

下面來看一下轉(zhuǎn)化規(guī)則。

1、?對于非原始類型的，通過ToPrimitive() 將值轉(zhuǎn)換成原始類型：

ToPrimitive(input, PreferredType?)

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

如果input為primitive，返回

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

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

否則，拋出TypeError

如果 PreferredType是String，步驟2跟3互換，如果PreferredType沒有，Date實例被設置成String，其他都是Number。

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

規(guī)則如下：

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

規(guī)則如下：

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

三、步步執(zhí)行

先看最簡單的子表達式16：+[]

只有一個操作數(shù)[]，肯定是轉(zhuǎn)化為number了，根據(jù)上面的規(guī)則2，[]是個數(shù)組，object類型，即對象。所以得先調(diào)用toPrimitive轉(zhuǎn)化為原始類型，并且PreferredType為number，這個參數(shù)表示更“傾向于”轉(zhuǎn)化的類型，這里肯定是number了。然后首先調(diào)用數(shù)組的valueOf方法，數(shù)組調(diào)用valueOf會返回自身，如下：

[].valueOf()
[]

這個時候，我們得到一個空串“”，還沒有結束，看上面的規(guī)則2描述，繼續(xù)調(diào)用toNumber，轉(zhuǎn)化為number類型，如下：

Number("")
0

大功告成！子表達式16轉(zhuǎn)化完畢，+[]，最終得到0。來看子表達式15：[~+””]

空串””前面有兩個一元操作符，但是操作數(shù)還是只有一個，所以，最終要轉(zhuǎn)化為的類型是number?？匆?guī)則2吧，空串調(diào)用toNumber得到0。

接下來是~，這是個什么東東呢？它是位運算符，作用可以記為把數(shù)字取負然后減一，所以~0就是-1 。

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

接下來看子表達式13就簡單了，把15、16求出來的填進去，就變成了這樣：–[-1][0]，取數(shù)組的第0個元素，然后自減，結果為-2，是不so easy!
繼續(xù)往上走，子表達式14：[~+[]]

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

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

1)、調(diào)用toPrimitive，發(fā)現(xiàn)是object類型

2)、調(diào)用valueOf，返回自身[-1]

3)、因為不是原始類型，繼續(xù)調(diào)用toString，返回”-1″

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

5)、與-2相乘，返回2

子表達式10：~~!+[]，不多說了，答案1. 就是從右往左依次一元計算。
有了9和10，我們來到了子表達式4，此刻它已經(jīng)長這樣了：2+1， 好，我不多說了。

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

這里的!-1當然就是false了。

接下來這個表達式3：false+{}有點關鍵。一個布爾加一個對象，那這個{}應該先轉(zhuǎn)化為原始類型，流程如下：

1)、調(diào)用toPrimitive，發(fā)現(xiàn)是object類型
2)、調(diào)用valueOf，返回自身{}，
3)、不是原始類型，調(diào)用toString，返回”[object Object]”
4)、false與”[object Object]”相加，false先轉(zhuǎn)化為字符串”false”
5)、相加得結果”false[object Object]”

知道了表達式3和4，我們就可以來看表達式1了，此時它是這樣的：”false[object Object]”[3]，因為這個[]可以取字符串的子字符，像charAt一樣，所以得到了結果”s”

四、最后

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

回顧一下這個過程其實也不復雜，只是有一些需要重復勞動的，只要你掌握了運算的優(yōu)先級，能把大串分解成一個個小串，然后運用類型轉(zhuǎn)化的知識挨個處理就搞定了。

怎么樣，看到這里你還覺得神奇嗎？
如果有人瞧不起js，請把這段代碼發(fā)給他，如果他想知道答案，請把本文發(fā)給他~

推薦閱讀