簡(jiǎn)單說(shuō) 通過(guò)JS的隱式轉(zhuǎn)換，關(guān)鍵時(shí)刻救你一命

Forest10 發(fā)布于2019-08-29 13:44 / 3082人閱讀

摘要：說(shuō)明在比較的時(shí)候，會(huì)進(jìn)行隱式轉(zhuǎn)換，你如果對(duì)隱式轉(zhuǎn)換不是特別熟悉，結(jié)果往往出乎你的意料。解釋相信我，這行代碼是簡(jiǎn)單的，它并不復(fù)雜，我們先來(lái)分解一下這行代碼我們把這一行，分解成了行了。簡(jiǎn)單說(shuō)中的與方法簡(jiǎn)單說(shuō)與引發(fā)的思考

說(shuō)明

JavaScript在比較的時(shí)候，會(huì)進(jìn)行隱式轉(zhuǎn)換，你如果對(duì)隱式轉(zhuǎn)換不是特別熟悉，結(jié)果往往出乎你的意料。
我們來(lái)看看這行代碼

(![]+[])[+!![]- -+!![]- -+!![]]+({}+[])[+!![]]+(![]+[])[+!![]- -+!![]- -+!![]]

這行代碼的結(jié)果可能出乎你的意料，看結(jié)果

結(jié)果居然是sos，這就是為什么會(huì)給文章這樣一個(gè)題目了，這行代碼看上去似乎是亂七八糟的，但是相信你看完這篇文章，一定能自己寫出這樣的代碼來(lái)。

解釋

相信我，這行代碼是簡(jiǎn)單的，它并不復(fù)雜，我們先來(lái)分解一下這行代碼

(![]+[])[+!![]- -+!![]- -+!![]]   //s
+  
({}+[])[+!![]]                      //o
+                
(![]+[])[+!![]- -+!![]- -+!![]]   //s

我們把這一行，分解成了3行了。

先看第一行
(![]+[])[+!![]- -+!![]- -+!![]]
這行還能分成兩部分

(![]+[])        
[+!![]- -+!![]- -+!![]]

我們繼續(xù)看這分開的兩部分
(![]+[]) 看看這個(gè)是什么意思
友情提示：
[ ] 轉(zhuǎn)為布爾值是 true
[ ] 轉(zhuǎn)為字符串是 ""

如果想知道為什么，推薦看看下面的兩篇文章。
簡(jiǎn)單說(shuō) JavaScript中的tostring( ) 與 valueOf( )方法
簡(jiǎn)單說(shuō) !![]==true 與 []==true 引發(fā)的思考

![ ] 就是false
(![]+[]) 會(huì)轉(zhuǎn)為這個(gè)樣子 (false+"") 結(jié)果就是"false",字符串類型的哦！

[+!![]- -+!![]- -+!![]]這個(gè)又是什么意思呢？
我們能看見 +!![] 這個(gè)東西是什么，居然出現(xiàn)了三次
+!![]，!的優(yōu)先級(jí)最高，先算 !![ ]，!![ ] 是對(duì) [ ]進(jìn)行了布爾值的轉(zhuǎn)換，最后結(jié)果就是true，最后在往前面來(lái)個(gè)+，就成了+true 這樣，進(jìn)行隱式轉(zhuǎn)換，把true轉(zhuǎn)為數(shù)字，就是1，好了，+!![] 就是 1 的意思，我們用1來(lái)替換一下代碼，看看變成了什么樣子[1- -1 - -1],我相信大家都能算出這么簡(jiǎn)單的正數(shù) 減負(fù)數(shù) 減負(fù)數(shù) 的結(jié)果來(lái)，所有最后的結(jié)果是[3]

好的，我們把第一行的這兩個(gè)部分放在一起看看 "false"[3],這下明顯了吧！字符串的第3個(gè)字符，這樣就有s了

繼續(xù)看第二行
({}+[]])[+!![]]
我們同樣拆成兩部分

({}+[]])
[+!![]]

第一部分 ({}+[])
( )里面的{}，不是語(yǔ)法上的花括號(hào)，不是語(yǔ)句塊的意思，而是表示了一個(gè)空對(duì)象，這里相加的時(shí)候會(huì)調(diào)用對(duì)象的toString()方法，所以它會(huì)轉(zhuǎn)為"[object Object]"，字符串類型的哦！
[ ],它同樣也會(huì)調(diào)用toString()方法，所以[ ],會(huì)轉(zhuǎn)為""，也就是一個(gè)空字符串。
這兩個(gè)結(jié)果放在一起就是"[object Object]"+"" ,最后結(jié)果是"[object Object]"。

第二部分 [+!![]]
上面我們已經(jīng)知道+!![] 是 1 的意思，所以最后的結(jié)果就是[1]
好的，我們把第二行的這兩個(gè)部分放在一起看看"[object Object]"[1]，這樣我們就看的很清楚了，o也有了

最后的第三行，和第一行一模一樣，好的我們用 + ,把這三行的結(jié)果拼接起來(lái)就是 "sos" 了。

總結(jié)

最后用張圖總結(jié)一下

相信現(xiàn)在，你應(yīng)該是理解上面的代碼了，寫這個(gè)代碼，也主要是想理解理解隱式轉(zhuǎn)換，題目是開玩笑的，希望大家永遠(yuǎn)不會(huì)真的遇到需要這樣的代碼的關(guān)鍵時(shí)刻。
最后推薦兩篇相關(guān)的文章，希望對(duì)大家有所幫助。
簡(jiǎn)單說(shuō) JavaScript中的tostring( ) 與 valueOf( )方法
簡(jiǎn)單說(shuō) !![]==true 與 []==true 引發(fā)的思考