Javascript中使用push()时，API请求前数组已加载数据的原因？

为什么使用push()方法时，第一个console.log(characters)会返回API请求的数据，而该API请求明明在这个console.log之后才发起？
另外，若不把数据push到characters数组，而是像注释代码那样直接赋值为data，就只有第二个console.log()会如预期返回数据。
两种情况里，console.log("First console log")始终优先执行，这符合预期。但用push()时，第一个console.log(characters)记录的数组已经包含了fetch()返回的数据。

测试代码如下：

let characters = []
console.log("First console log")
console.log(characters)

fetch("https://hp-api.onrender.com/api/characters")
  .then(res => res.json())
  .then(data => {
    characters.push(data)
    // characters = data
    console.log(characters)
    console.log("Second console log")
  })

这是Chrome DevTools（VS Code调试控制台同理）的特性：它显示引用类型（如数组、对象）时，不会直接打印该值的快照，而是保存对这个引用的链接。当你在控制台展开数组时，它才会读取这个引用的当前实际值。

• 使用push()的场景：characters初始是空数组，第一个console.log执行时确实输出空数组，但DevTools只记录了该数组的引用。等fetch异步完成、push把数据塞进数组后，你展开之前的那条日志，看到的就是数组的最新状态——已经包含API返回的数据。
• 使用直接赋值characters = data的场景：此时是把characters变量重新指向了一个新数组（data），第一个console.log记录的是原空数组的引用。后续新数组的修改不会影响原空数组，所以展开第一个日志看到的还是空的，只有第二个console.log打印的是新数组的数据。

如果想查看日志执行时的真实状态，可以用console.log(JSON.stringify(characters))，这样会打印出当时的字符串化结果，不会受后续修改影响。

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