如何在Javascript中解构一个json对象数组

Question

我在我的项目中使用了来自“https://randomuser.me/api/”的对象“数据”。

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "mia",
        "last": "sutton"
      }
    }
  ]
}

我对数据对象的结果进行了如下解构； const {results} = data; 如何解构我创建的结果变量，并从中获取第一项我希望将解构的数组项声明为配置文件。这表示从 API 调用获得的用户的个人资料数据，我想在我的应用中显示。

Answer 1

你可以这样做：

const { results: [firstItem] } = data;

有关解构的更多信息，请参阅this MDN article。

const data = {
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "mia",
        "last": "sutton"
      }
    }
  ]
};

// declare a const variable named firstItem that holds the first element of the array
const { results: [firstItem] } = data;
// You could event destructure the content of this first array item like this
const { results: [{ gender, name }] } = data;
// or go deeper like this
const { results: [{ name: { title, first, last } }] } = data;

console.log(firstItem);
console.log(gender);
console.log(name);
console.log(title, first, last);

根据您的代码（参见 cmets），这也应该可以：

const data = {
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "mia",
        "last": "sutton"
      }
    }
  ]
};

const displayUserPhotoAndName = (data) => {
  if(!data) return;
  const { results } = data;
  const { results: [profile] } = data;

  console.log(profile);
}

displayUserPhotoAndName(data);