Console可正常输出完整数组，访问首元素时返回undefined问题求助

问题根因 #

这是浏览器控制台对引用类型的惰性求值特性和异步赋值逻辑共同导致的典型问题：

• 浏览器打印数组这类引用类型数据时，不会留存打印瞬间的内容快照，仅会存储该数组的内存引用。你在控制台点击展开数组的时候，才会主动读取引用对应地址的当前内容，此时你的异步赋值操作（接口请求、定时器回调等）已经执行完毕，所以能看到完整的数组元素。
• 你打印数组第一个元素时，是直接读取打印瞬间的数组取值，此时异步操作还未执行完成，数组仍为空，自然返回undefined。

验证方案 #

你可以把打印数组的语句改为打印序列化后的快照，就能看到打印时刻的真实数组状态：

// 输出结果会和你打印arr[0]的undefined对应，显示打印瞬间数组为空
console.log(JSON.parse(JSON.stringify(arr)))
console.log(arr[0])

解决方法 #

所有需要读取数组元素的逻辑，都要放在数组赋值的异步流程之后执行，比如：

• 接口请求的then回调内部
• await异步请求的语句之后
• 前端框架监听数组变化的副作用回调中

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