送给产品经理一段代码 让他放到 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))

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

这就是我们前端一直想对你说的话

参考文章

• 数据类型转换: 自动转换

• 按位操作符: ~(按位非)

• 运算符优先级

注 文中对产品经理的冒犯仅为了行文效果 😅 前端和产品是相亲相爱的一家人 😆

作者：小鱼二
链接：https://juejin.cn/post/6844903561495576590
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。