从一道题看js的拆箱操做

前段时间看到一道题，以下：([][[]]+[])[+![]]+([]+{})[!+[]+![]]问最终打印结果，而后简单了解一下js的装箱，拆箱操做。

基本

1. 装箱操做： 就是将基本类型(String, Number, Boolean)转为引用类型
2. 拆箱操做： 与装箱相反，就是将引用类型转为基本类型， 经常使用的基本方法有： valueof , toString()

分析

像上面的那个题目，主要是拆箱操做，下面就来简单拆解分析一下吧：

1. 基础：
    [] ==> [] (Array);
    [[]] ==> [array(0)]  (Array);
    []+[[]] ???
    ok, 咱们简单来了解一下js中的+运算符：
    +：通常是用于对象相加的，这是在两个对象都是Number的状况下。那其余类型下就涉及到隐式转换，下面看下隐式转换的规则
      1. 若是一个对象是String,那么就要将另外一个对象转换为String再进行字符串拼接
      2. 若是对象都是复杂类型,那么就要将两个对象均转化为String,再进行拼接。
      至于若是对象是其余简单类型(Number, Boolean),就要先将对象转化为Number再进行运算
    因此 []+[[]] ==> String([]) + String([[]]) == "" + "" ==> ""
   2. 拆解：
    而后咱们来看下题目，简单拆分为4部分：
    
      1. ([][[]]+[])
         [][[]] 这部分乍一眼看过去会以为很蒙，但咱们已经知道[] ==> Array,经常使用的获取Array中的数据的方法有Array[]
         因此，让咱们来拆解下吧：
         首先为了更清楚,将最左侧的[]赋值给 father ==> var father = [];
         将右侧[]中的[]赋值给child ==> var child = [];
         即最终 [][[]] == father[child] == "undefined"
         [][[]] + [] == String("undefined") + String([]) == "undefined"
         
      2. [+!![]]
         关于这一部分，咱们须要了解一下!!
         !!: 通常来讲，彷佛你们广泛认为是将对象取反，再取反，即双重否认。但其实应该是将对象强制转换为Boolean类型。
         关于Boolean中，须要关注，{}和[]转换为Boolean时是true.
         [+!![]] ==>[+true] ==> [Number(true)] ==> [1]
      3. ([]+{})
         这一部分就很简单了： []+{} ==> String([]) + String({}) == "" + "[object Object]".
         可是，若是将上面两个对象调转位置呢：
         {} + [] : 按常规来讲，应该是和上面同样的结果，可是最终的打印结果倒是0，这是为何呢。
         js中{} 不只能够表明一个对象，同时也有多是一个代码块，有些时候，js会将写在前面的{}解释为代码块，因而参与运算的其实就只有+[]了。
      4. [!+[]+!![]]
        通过上面部分，这里也很清楚了：
        !+[] ==> ! + String([]) == !+"" == !"" == true
        [true + !![]] == [true + true] = [Number(true) + Number(true)] == [2]
      
      因此最后的结果： "undefined"[1] + "[object Object]"[2] == "nb";

经过上面的题目，应该已经大体了解了关于拆箱的一些基础了。这样，下次看到就不会一头雾水了。