在声明 API 请求之前，在 Javascript 中使用 push() 时，数组被设置为来自 API 请求的数据

Question

为什么第一个console.log(characters)在使用push方法声明API请求之前返回API请求的数据？

如果不是将数据推送到字符，而是将数据设置为注释掉的代码中的数据，只有第二个 console.log() 按预期返回数据。

在这两个示例中，console.log("First console log") 总是按预期首先执行。 因此，当使用 push() 方法时， console.log("First console log") 首先执行，但第一个 console.log(characters) 仍然记录在 console.log("First console log") 之前声明的数组来自 fetch() 的数据。

使用 VScode 和 chrome DevTools。

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")
  })

Answer 1

那是因为

console.log()

的输出是对数组的实时引用。如果数组在记录后发生变化，变化仍然可以在引用上观察到。

如果将其打印为 JSON（即

console.log(JSON.stringify(characters))

），您将得到“[]”。

并且当您将

characters

设置为新数组时，控制台中的引用仍然指向旧的、未更改的数组。