送給產品經理一段代碼 讓他放到 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 -> 1B --> -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))

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

這就是我們前端一直想對你說的話

參考文章

• 數據類型轉換: 自動轉換
• 按位操作符: ~(按位非)
• 運算符優先級

注 文中對產品經理的冒犯僅為了行文效果 ? 前端和產品是相親相愛的一家人 ?

github 原文地址

總結

以上是生活随笔為你收集整理的送给产品经理的一段代码 (!(~+[]) + {})[--[~+][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] ...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。