送給產品經理一段程式碼 讓他放到 console 去
(!(~+[]) + {})[--[~+""][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] * ~+[]]
其實這段程式碼是我的同事發給我的, 我定睛一看一定有坑, 於是準備破解一番
其實這裡面涉及到的知識點無非三個
- 資料型別的轉換
- 位運算(按位非)
- 運算子的優先順序
分析之前我推薦大家看幾篇文章
首先我們把程式碼進行拆分
(!(~+[]) + {})[--[~+""][+[]] * [~+[]] + ~~!+[]]
+
({} + [])[[~!+[]] * ~+[]]
複製程式碼簡單來看就是
(A)[B] + (C)[D]
首先來看 A !(~+[]) + {}
+[] -(資料型別轉換)-> 0
~+[] --> ~0 -(位運算)-> -1
!(~+[]) --> !(-1) -(型別轉換)-> false
(!(~+[]) + {}) --> false + {} -(型別轉換)-> 'false[object Object]'
複製程式碼再來看 B --[~+""][+[]]*[~+[]] + ~~!+[]
[~+""] --> [~0] --> [-1]
+[] --> 0
--[~+""][+[]] --> --[-1][0] --> --(-1) --> -2
[~+[]] --> [~0] --> [-1]
~~!+[] --> ~~!0 --> ~~true --> ~-2 -> 1
B --> -2 * [-1] + 1 --> 2 + 1 --> 3
複製程式碼那麼 (A)[B] --> 'false[object Object]'[3] --> 's'
再來看 C ({} + [])
這裡的 {} 其實是個程式碼塊
所以等價於 +[] 即 [object Object]
再來看 D [~!+[]] * ~+[]
[~!+[]] --> [~!0] --> [!1] --> -2
~+[] --> ~0 --> -1
D -> -2 * -1 --> 2
複製程式碼所以 (C)[D] --> '[object Object]'[2] --> 'b'
那麼
(!(~+[]) + {})[--[~+""][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] * ~+[]]
--> (A)[B] + (C)[D)
--> 's' + 'b'
--> 'sb'
複製程式碼謝謝觀看 ?
現在可以發給產品經理了
讓他開啟 chrome, (windows: F12, mac: command+option+(j or i))
貼上 (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
這就是我們前端一直想對你說的話
參考文章
注 文中對產品經理的冒犯僅為了行文效果 ? 前端和產品是相親相愛的一家人 ?