JavaScript对象数组返回长度为0/undefined但Chrome inspect访问正常

Chrome DevTools 的 console.log 对引用类型数据采用懒加载的展示逻辑：

• 代码执行 console.log(test) 时，数组尚未完成数据填充，此时控制台外层展示的 [] 就是打印这一刻数组的真实状态（空数组，长度为0）。
• 你点击展开数组时，DevTools 才会读取内存中该数组的最新值，此时后续的异步操作已经完成了数组填充，因此能看到完整的两条对象数据。

代码中同步执行的 console.log(test[0])、数组遍历、test.length 打印逻辑触发时，数组确实还未被赋值，因此返回 undefined 和 0。等你手动在控制台执行命令时，异步逻辑已经执行完毕，数组已经有值，因此可以正常返回结果。
该问题本质是异步时序问题，和 DevTools 的懒加载机制共同导致了认知偏差，和控制台外层显示的 [] 本身无关。

• 打印时序列化后输出，规避懒加载干扰：代码中打印时执行 console.log(JSON.parse(JSON.stringify(test))) 或者 console.log(JSON.stringify(test))，即可拿到打印执行时刻的数组真实快照。
• 调整代码时序，确保数组赋值完成后再操作：如果数组的填充逻辑在异步请求、定时器、事件回调等异步流程中，所有操作数组的逻辑都要放到数组填充完成的回调中执行，也可以通过 Promise/async await 规范异步流程。
• 用断点调试替代 console.log：在需要查看数组状态的位置添加断点，代码执行到断点时读取的数组值就是当前的真实状态，不会受 DevTools 懒加载机制的影响。

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