Chrome Dev Tools中为何fruit数组前有(3)标识，years数组却没有？

控制台里数组前面标注的(n)，本质是DevTools在首次抓取变量快照时读取到的数组实时length值，不是特殊的类型标记。两个数组显示不一致，完全是异步执行带来的快照时机差导致的，和数组是静态定义还是fetch生成没有本质结构差异。

具体的差异逻辑 #

• 静态定义的fruit数组是同步代码执行阶段直接初始化完成的：DevTools生成这个变量的控制台预览条目时，已经拿到了稳定的长度值3，所以会直接在数组前面标注(3)。
• fetch回调里通过push生成的数组（你代码里的实际变量名是year，对应提问中提到的years）是在异步微任务流程里完成初始化的：
  • 如果你定义这个数组变量时，没有在同步代码阶段给它赋空数组初始值（比如只写了let year;），那DevTools第一次抓取变量快照的时候，这个变量还是undefined状态；等后续fetch响应返回、代码执行完push给数组塞了对应元素之后，控制台已经生成的预览条目不会自动刷新前置的长度标识，只会在你点击展开数组的时候，才同步展示内部的元素列表。
  • 就算你在同步阶段提前初始化了空数组let year = []，因为异步push的流程和控制台渲染是并行的，也很容易出现控制台预览行先于异步赋值完成生成的情况，同样不会在预览行前面显示长度标识。

验证方法 #

不管是静态的fruit还是异步生成的year数组，只要在控制台手动读取对应变量的.length属性，得到的长度值都是准确的。两个都是标准JS数组，不存在结构上的问题，纯粹是DevTools快照渲染时机导致的显示差异。

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