您的位置:首页 > Web前端

前端送给产品经理的一段代码,有意思

2018-02-09 16:00 555 查看
送给产品经理一段代码 让他放到 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'
谢谢观看
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: