前言
前端入门门槛就是低，走几步，才知道水深。
先看看一个黑科技， 纳尼，这是什么东西， 贴入浏览器执行一下不就知道答案呢？
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] // sb 复制代码
等你一执行，请君冷静，让我们来揭开它这见不得人的面纱。
其实在一行能装逼的JavaScript代码讲得灰常清晰和明白，但还可以补充和扩展，于是就有了这篇文章。
运算符优先级
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] 这段装逼代码里面用的只有 () ! ~ + [] -- *
优先级别
- () 优先级21
- [] 优先级20
- -- ~ ! + 优先级17
- * 优先级15
- + 优先级14
[] 这里也有两种，一种是作为数组，一种是作为成员访问符。
更多优先级别可以参见MDN的运算符优先级
类型转换
减号-，乘号*，肯定是进行数学运算，所以操作数需转化为number类型
加号+，可能是字符串拼接，也可能是数学运算，所以可能会转化为number或string
一元运算，如+[]，只有一个操作数的，转化为number类型
转换顺序
- 尝试使用ToPrimitive，转换为原始类型，
- 转换成功，返回值。
- 否则调用valueOf，如果返回是原始类型，返回
- 否则调用toString()，如果返回原型类型，返回 , 否则，抛出异常
一些特殊情况的加法
[] + [] // '' [] + {} // '[object Object]' {} + [] // 0 ({} + []) // '[object Object]' {} + {} // NaN ({} + {}) // '[object Object][object Object]' 复制代码
+[]
这里是一元加号
[] 不是原始类型，调用valueOf
[].valueOf() 返回的依旧不是原始类型
[].toString() 返回"",
+""结果为0
[] + []
这里是普通的加号
[]转为字符串为空字符串，所以空字符串+空字符串，还是空字符串。
[] + {}
{}转为字符串[object Object]
[]转为字符串为空
空 + [object Object] = [object Object]
{} + []
{} + [] 中的第一个{}会被识别为代码块，被忽略掉;
+[]转换过程
[] 不是原始类型，调用valueOf
[].valueOf() 返回的依旧不是原始类型
[].toString() 返回"",
+""结果为0
({}+[])
({}+[])这里面 {} + [] 是作为表达式执行的，
{}最终转换为 "[object object]"
[]最终转换为 ""
相加为 "[object object]"
{} + {}
{}最终转换为 "[object object]"
第一个{}会被认为是代码块，不进行任何操作
+{}等同于对 "[object object]"转为数字，返回 NaN
({} + {})
这个就好理解了，由于()的作用， {}作为变量进行运算。
({} + {}) = [object Object] + [object Object] = [object Object][object Object]
起飞，解题
好，准备好这些只是之后，我们就可以来解读装逼,为了方便解读， 我写出每一步的解读， 来，一起装X，一起飞。
const results = [ '(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // +[] ==> 0 '(!(~0)+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // ~0 ==> -1 取反减1 '(!(-1)+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // !(-1) ==> false '(false+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // false+{} ==> "false[object object]" '"false[object object]"[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // +"" ==> 0 '"false[object object]"[--[~0][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // ~0 ==> -1 '"false[object object]"[--[-1][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // +[] ==> 0 '"false[object object]"[--[-1][0]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // +[] ==> 0 '"false[object object]"[--[-1][0]*[~0] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // ~0 ==> -1 '"false[object object]"[--[-1][0]*[-1] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // --[-1][0] ==> -2 '"false[object object]"[-2*[-1] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // [-1] ==> "-1" '"false[object object]"[-2*"-1" + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // "-1" ==> 1 '"false[object object]"[-2*-1 + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // -2*-1 ==> 2 '"false[object object]"[2 + ~~!+[]]+({}+[])[[~!+[]]*~+[]]', // +[] ==> 0 '"false[object object]"[2 + ~~!0]+({}+[])[[~!+[]]*~+[]]', // !0 ==> true '"false[object object]"[2 + ~~true]+({}+[])[[~!+[]]*~+[]]', // ~true ==> -2 '"false[object object]"[2 + ~-2]+({}+[])[[~!+[]]*~+[]]', // ~-2 ==> 1 '"false[object object]"[2 + 1]+({}+[])[[~!+[]]*~+[]]', // 2+1 ==> 3 '"false[object object]"[3]+({}+[])[[~!+[]]*~+[]]', // "false[object object]"[3] ==> s '"s"+({}+[])[[~!+[]]*~+[]]', // {} ==> "[object object]" '"s"+("[object object]"+[])[[~!+[]]*~+[]]', // [] ==> "" [].toString() '"s"+("[object object]"+"")[[~!+[]]*~+[]]', // "[object object]"+"" ==> "[object object]" '"s"+"[object object]"[[~!+[]]*~+[]]', // +[] ==> 0 '"s"+"[object object]"[[~!0]*~+[]]', // !0 => true '"s"+"[object object]"[[~true]*~+[]]', // ~true ==> -2 '"s"+"[object object]"[[-2]*~+[]]', // +[] ==> 0 '"s"+"[object object]"[[-2]*~0]', // ~0 ==> -1 '"s"+"[object object]"[[-2]*-1]', // [-2] ==> "-2" '"s"+"[object object]"["-2"*-1]', // "-2" ==> 2 '"s"+"[object object]"[-2*-1]', // -2*-1 ==> 2 '"s"+"[object object]"[2]', // "[object object]"[2] ==> b '"s"+"b"', // "s" + "b" ==> "sb" '"sb"', ]; results.forEach( (v,i)=>{ (function(delay){ setTimeout(function(){ console.log(Date.now(), eval(v)) },delay*5) })(i) }) 复制代码
你会发现好多"sb"，哟， 你还真看到这里啊，说的就是你哦。 哈哈。
总结
通过这一行代码，我们更深入的了解了
- 运算符优先级
- 对象加减转换规则
- 代码块
{}与对象{}的区别
