javascript - JSON 中的对象数组的行为与本地创建的对象数组不同

Question

我一直在学习 Wes Bos 的 Javascript30 类(class)，并且一直在搞乱 JSON 和数组。

我正在尝试弄清楚这里发生了什么。

我有一个简单的 JSON 测试文件，我正在提取该文件并将其推送到一个数组中，以及一个在本地创建的相同数组。当我尝试用本地数组来 console.log 第一个人的名字时，它工作得很好。但是，当我尝试 console.log JSON 获取的数组中第一个人的姓名时，我收到错误 “Uncaught TypeError:无法读取未定义的属性“名称””

JSON 文件:

[
  {
    "name":"Sean",
    "Age":"23"
  },
  {
    "name":"kev",
    "Age":"23"
  }
]

JavaScript:

const people = [];
const peopleLocal = [ {"name":"Sean", "age":"23"}, {"name":"kev", 
"age":"23"}];
const endpoint = "test.json";
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => people.push(...data));

console.log(people);
console.log(peopleLocal);


console.log(peopleLocal[0].name);
console.log(people[0].name);

console.log(people) 和 console.log(peopleLocal) 返回相同的对象数组。然后 console.log(peopleLocal[0].name) 返回“Sean”。但是 console.log((people[0].name) 返回上面提到的 undefined 错误。为什么？

Answer 1

它们的行为根本没有不同，您只是在异步获取完成之前打印名称。尝试在正确的时间打印它，即在收到响应的回调中打印它，如下所示:

const people = [];
const peopleLocal = [ {"name":"Sean", "age":"23"}, {"name":"kev", 
"age":"23"}];
const endpoint = "test.json";
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => {
      people.push(...data);
      console.log(people);
      console.log(people[0].name);
  });

console.log(peopleLocal);
console.log(peopleLocal[0].name);

But how come console.log(people) works outside of the callback, but not console.log(people[0].name)?

好问题。开发者控制台的对象浏览器实际上存储对对象的引用，而不是对象的副本，因此当您在控制台上查看它时，您会看到最新的值，而不是打印时的值。

请参阅此答案:

console.log() shows the changed value of a variable before the value actually changes