控制台诡异录之展开与缩略不同

  • Post author:
  • Post category:其他


问题复现

最近朋友发给我这样的一个串代码:

var arr = [1, 4, 2, 3 ];
console.log(arr);
arr.sort();

朋友说,这个输出不正确。我表示不信,就试了下:


clipboard.png

从结果看,没毛病啊。朋友说,你展开看看,一看果然有问题


clipboard.png


缩略状态

的显示与

展开

的显示不同!!!

问题思考

这个问题的表现是:

缩略状态下显示

原数组


[1, 4, 2, 3 ]

,展开状态下显示

排序后

的数组

[1, 2, 3, 4 ]

这里的不一致导致我们比较困惑:



console.log(arr)

打印的数组到底是原数组还是排序后的数组?

我们知道的是JS代码是按照顺序执行的,按道理说应该打印

[1, 4, 2, 3 ]

,也就是说缩略状态的显示是符合常理的。通过下面的代码我们可以佐证:

var arr = [1, 4, 2, 3 ];
console.log(arr.toString()); // 1,4,2,3
arr.sort();

但是为什么展开后的数组却是排序后的呢?

我们思考3秒钟

1…

2…

3…

我个人理解这个问题是这样的:

Chrome的展开是一个点击事件,也就是说这是一个异步,等你点击的时候

arr.sort()


已经执行完毕了,这时候点击展开arr,其实展开的就是排序后的数组(因为arr是引用类型的)。这样,就出现了上面这个问题。

除数组外,对象也存在这个问题,换句话说,这个引用类型的应该也都存在这个问题。

至此,这个问题算是有了解释。

以上,个人理解,如果你有更好的解释,欢迎提出。