同步还是异步？console.log的怪异现象解析

在开始正式装逼之前，我们先来看几句简单的代码，并试图预测它的输出结果

    var a=[{index:1},{index:1}];
    console.log('==============修改前===========');
    console.log(a);
    for(var i=0;i<a.length;i++){
        a[i].index=2;
    }
    console.log('==============修改后===========');
    console.log(a);

在没有遭受过浏览器的毒打之前，你可能会觉得会觉得会先输出[{index:1},{index:1}]，之后输出[{index:2},{index:2}]，但是真正的结果却是酱紫的

把结果展开之后

看到这个结果之后，我第一个反应是，难不成console.log是异步的？为了验证这个想法，我把代码改成下面这个样子

   var a=[1,1,1,1,1,1,1,1];
   console.log('==============修改前===========');
   console.log(a);
   for(var i=0;i<a.length;i++){
       a[i]=2;
   }
   console.log('==============修改后===========');
   console.log(a);

我们居然发现输出结果是正常的

那么，问题出在哪里呢？

查阅了大量资料之后，发现问题就出在第一步的手动展开结果那里。我们一直以来的理解是，console.log会输出当前输出结果的一个快照，这个理解确实也没错，但出于性能方面的考虑，浏览器在输出结果时，对于比较复杂的数据结构，并不会把这些数据全部展开，直到你手动戳开这些数据时，才会去获取里面的值，但是很明显，这个时候，数据已经被我们后续for循环中的操作给修改了，这就造成了一种“异步”的感觉，而事实上，整个操作其实都是同步的。

最后，以上操作结果在nodejs，chome，ie，edge中均有相同的表现