送给产品经理一段代码 让他放到 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+shift+j)
粘贴
(!(~ + []) + {})[--[~ + ""][ + []] * [~ + []] + ~~ ! +[]] + ({} + [])[[~ ! +[]] * ~ + []]
这就是我们前端一直想对你说的话
参考文章
数据类型转换: 自动转换
按位操作符: ~(按位非)
运算符优先级
来源: https://juejin.im/post/5a7d19d9f265da4e9673e809