理解Array Length与属性Length的差异？Chrome控制台数组长度异常排查

嘿，这个问题我之前调试代码时也踩过同款坑！Chrome控制台的这种“折叠和展开显示完全不一样”的情况，本质是它的惰性求值特性在搞鬼～

问题原因 #

当你用console.log()打印数组时：

• 折叠状态下显示的是执行console.log那一刻数组的快照信息（包括当时的长度和表面元素）；
• 但当你点击展开数组时，控制台会重新读取数组当前的实际状态。

对应到你的场景：你看到折叠时是长度11的[6, 7, ..., 16]，但展开后出现了索引11:6、长度34的情况，说明在你打印数组之后，代码又对这个数组做了修改——比如往更高的索引位置赋值（甚至到了索引33），而JavaScript数组的长度是由当前最大的索引值+1决定的，所以展开后就出现了和折叠时完全不同的状态。

解决办法 #

想要精准看到数组在打印瞬间的真实状态，可以试试这几个实用方法：

• 深拷贝快照：如果数组里都是数字这类基本类型，用JSON.parse(JSON.stringify(yourArray))创建完全独立的副本再打印，后续修改原数组也不会影响它：

  console.log(JSON.parse(JSON.stringify(yourArray)));
  

• 浅拷贝快照：针对基本类型数组，用展开运算符也能快速生成副本：

  console.log([...yourArray]);
  

• 断点调试：在console.log那一行打个断点，让代码停在打印时刻，此时展开数组看到的就是当时的真实状态，不会被后续代码干扰。

内容的提问来源于stack exchange，提问作者Michael