我如何解构一个对象

Question

我有一个功能

const displayUserPhotoAndName = (data) => {
  if (!data) return;

  // add your code here

  clearNotice();

};

在第一个 if(!data) return 之后；如果未提供预期的数据参数，则终止函数的语句，创建一个解构数据参数并从中获取结果的语句属性；

在下一行中创建第二条语句，对刚刚创建的结果变量进行解构，并从中获取第一项（它是一个数组！参见https://randomuser.me/api/）。您的解构数组项应声明为配置文件。这表示您希望在您的应用中显示的 API 调用中获得的用户个人资料数据。

const displayUserPhotoAndName = (data) => {
    if(!data) return;    

    // add your code here
    const {results: results} = data;
    const {profile: results} = results;

这就是我现在所在的位置，但我仍然收到一条错误消息，提示“您尚未从传递给 displayUserPhotoAndName 函数的数据获得的结果中解构配置文件属性。非常感谢您的帮助。 ..

Answer 1

您可以通过两种方式执行此操作：

你的两步做法：

const {results} = data;
const {profile} = results;

或一步到位：
```
const {results: {profile}} = data;
```

为了更好地理解，您应该查看 the documentation of object destructuring.

Answer 2

举个例子：

const data = {
    results: {
        name: "test1",
        surname: "123"
    },
    profile: {
        name: "test2",
        surname: "321"
    }
};

const { results, profile } = data;

console.log(results);
console.log("====");
console.log(profile);

Answer 3

如果您需要结果数组中的第 n 个元素，您可以按照以下步骤使用

{ results: { n: profile } } = data;

let data = { results: [1, 2, 3, 4] }

let { results: { 0: profile1, 2: profile2 } } = data;

console.log(profile1)
console.log(profile2)

甚至你可以做进一步的解构

let data = { results: [{ name: 'myname1', gender: 'male' }, { name: 'myname2', gender: 'male' }, { name: 'myname3', gender: 'female' }, { name: 'myname4', gender: 'male' }] }

let { results: { 0: profile1, 2: { name, gender } } } = data;

console.log(profile1)
console.log(name)
console.log(gender)

我如何解构一个对象

How do i destructure an object

javascript

es6-modules