Why系列： (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

这是我参与更文挑战的第6天，活动详情查看：更文挑战

前言

前端入门门槛就是低，走几步，才知道水深。
先看看一个黑科技，纳尼，这是什么东西，贴入浏览器执行一下不就知道答案呢？

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
// 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"，哟，你还真看到这里啊，说的就是你哦。哈哈。

总结

通过这一行代码，我们更深入的了解了

运算符优先级
对象加减转换规则
代码块{}与对象 {}的区别

这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已
 一行能装逼的JavaScript代码
 JS中{}+[]和[]+{}的返回值情况是怎样的
 What is {} + {} in JavaScript?
JavaScript中圆括号() 和方括号[] 的特殊用法疑问？
javascript运算符——条件、逗号、赋值、()和void运算符
 JavaScript values: not everything is an object