时间戳

首页 > 解决方案 > JSON 中的对象数组与本地创建的对象数组的作用不同

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

问题描述

我一直在学习 Wes Bos 的 Javascript30 课程，并且一直在搞乱 JSON 和数组。

我试图弄清楚这里发生了什么。

我有一个简单的 JSON 测试文件，我正在获取并推送到一个数组中，以及一个在本地创建的相同数组。当我尝试console.log使用本地数组的第一个人的名字时，它工作正常。但是当我尝试console.log获取 JSON 获取数组中的第一个人的名字时，我得到一个错误"Uncaught TypeError: Cannot read property 'name' of undefined"

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)返回“肖恩”。但是console.log((people[0].name)返回undefined上面提到的错误。为什么？

标签： javascriptarraysjson

解决方案

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

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);

但是为什么 console.log(people) 在回调之外工作，而不是 console.log(people[0].name)？

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

看到这个答案：

console.log() 在值实际改变之前显示变量的改变值

推荐阅读