如何解构此深层嵌套对象？

Question

我在下面有这个功能：

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

    // add your code here

    clearNotice();
  };

数据参数是https://randomuser.me/api/中的API

该作业具有以下说明：

找到displayUserPhotoAndName函数并在其中执行以下操作：

• 在第一个if（！data）返回之后； 终止
  如果未提供预期的数据参数，请创建一个
  解构数据参数并获得
  结果属性；

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

步骤3仍在displayUserPhotoAndName函数中：

• 在您的应用中设置HEADING元素，以显示API返回的用户个人资料的标题，姓氏和名字（按顺序，用一个空格隔开）。
• 在您的应用中设置IMG，以显示API返回的用户个人资料的大图片。

我做了什么：

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

    // add your code here
    const {results} = data.results;
    const [profile] = results;
    const {title, First, Last} = results;
    const [,,,,,,,,,picture] = results;
    const largeImage = picture.large;
    userImage.src = largeImage;
    headerUserInfo.innerText = title + ' ' +  First + ' ' + Last;
    clearNotice();
    displayExtraUserInfo(profile);
  };

我得到的错误：

您尚未从传递给'displayUserPhotoAndName'函数的'data'参数中解构'results'属性

我非常需要帮助。 谢谢你的期待

Answer 1

我不会为您提供完整的答案，但会给您一些提示：

const { results } = data
const { profile } = results
console.log(profile)

可以写成：

const { results: { profile } } = data
console.log(profile)

这是我的一些文章，您可以从中进一步介绍：

分解对象属性

此类型注释如何工作

为何在解构时以目标为目标