在Javascript中解构函数参数[关闭]答案

【问题标题】：Destructure a function parameter in Javascript [closed]在Javascript中解构函数参数[关闭]
【发布时间】：2019-03-13 06:36:29
【问题描述】：

我有一个名为 displayUserDetail 的函数，其中一个 api 对象作为一个名为 userData 的参数从该 API — https://randomuser.me/api 传递。

这是一个示例 API 响应（精简）：

{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "peter",
        "last": "morris"
      },
      "location": {
        "street": "4330 avondale ave",
        "city": "mackay",
        "state": "tasmania",
        "postcode": 4247,
        "coordinates": {
          "latitude": "-79.8202",
          "longitude": "-177.8268"
        },
        "timezone": {
          "offset": "+7:00",
          "description": "Bangkok, Hanoi, Jakarta"
        }
      },
      "email": "peter.morris@example.com",
      "login": {
        "uuid": "cad308a3-5d94-4269-872b-d0a473c4a269",
        "username": "blackpeacock867",
        "password": "josephin",
        "salt": "x2MrizMY",
        "md5": "8a5298049f819b7ffab05853b6480c8c",
        "sha1": "7dde7e2aa7e7b3efdbec903fccf7f61d53c6c6dd",
        "sha256": "aac87211a73f52df4b54932ee9a4deaabd51c703249f762b8e518f121eeb7b86"
      },
      "dob": {
        "date": "1947-01-10T18:33:20Z",
        "age": 72
      },
      "registered": {
        "date": "2012-12-14T12:51:06Z",
        "age": 6
      },
      "phone": "04-2726-1355",
      "cell": "0407-597-184",
      "id": {
        "name": "TFN",
        "value": "280671361"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/26.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/26.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/26.jpg"
      },
      "nat": "AU"
    }
  ],
  "info": {
    "seed": "26dbd13d59ab09ca",
    "results": 1,
    "page": 1,
    "version": "1.2"
  }
}

由此，我需要使用解构从此 api 获取 username 和 picture。

const displayUserDetail = (userData) => {
  if (!userData) return;
  // ???
}

如何使用析构创建语句以从 API 响应中获取 username 和 picture？

【问题讨论】：

1)你的问题不清楚 2)!user data 会抛出错误。 3）给出示例对象
我不知道。 userData 应该在这里是什么？什么是“api 对象”？您需要描述您期望的数据。（顺便说一句，解构只是描述对象/数组外观的另一种方式）
错字，应该是 (!userData)
const { displayUserDetail } = userData; ??
@p.s.w.g 预期数据来自 api 调用 randomiser.me/api

标签： javascript destructuring

【解决方案1】：

你可以像这样使用解构：

const displayUserDetail = (userData) => {
  const {
    login: username
  } = userData
  const {
    picture
  } = userData
  console.log(username)
  console.log(picture)
}

let data = {
  "results": [{
    "gender": "male",
    "name": {
      "title": "mr",
      "first": "peter",
      "last": "morris"
    },
    "location": {
      "street": "4330 avondale ave",
      "city": "mackay",
      "state": "tasmania",
      "postcode": 4247,
      "coordinates": {
        "latitude": "-79.8202",
        "longitude": "-177.8268"
      },
      "timezone": {
        "offset": "+7:00",
        "description": "Bangkok, Hanoi, Jakarta"
      }
    },
    "email": "peter.morris@example.com",
    "login": {
      "uuid": "cad308a3-5d94-4269-872b-d0a473c4a269",
      "username": "blackpeacock867",
      "password": "josephin",
      "salt": "x2MrizMY",
      "md5": "8a5298049f819b7ffab05853b6480c8c",
      "sha1": "7dde7e2aa7e7b3efdbec903fccf7f61d53c6c6dd",
      "sha256": "aac87211a73f52df4b54932ee9a4deaabd51c703249f762b8e518f121eeb7b86"
    },
    "dob": {
      "date": "1947-01-10T18:33:20Z",
      "age": 72
    },
    "registered": {
      "date": "2012-12-14T12:51:06Z",
      "age": 6
    },
    "phone": "04-2726-1355",
    "cell": "0407-597-184",
    "id": {
      "name": "TFN",
      "value": "280671361"
    },
    "picture": {
      "large": "https://randomuser.me/api/portraits/men/26.jpg",
      "medium": "https://randomuser.me/api/portraits/med/men/26.jpg",
      "thumbnail": "https://randomuser.me/api/portraits/thumb/men/26.jpg"
    },
    "nat": "AU"
  }],
  "info": {
    "seed": "26dbd13d59ab09ca",
    "results": 1,
    "page": 1,
    "version": "1.2"
  }
}

data.results.forEach(userData => displayUserDetail(userData));

【讨论】：

我如何创建一个语句来解构通过参数传递的 userData 并从中获取 api 属性
这正是答案所显示的@YemiEsuga。
我得到一个错误，'你没有解构'userData'参数的'result'属性传递给'displayUserDetail'
@YemiEsuga 好像你已经更新了数据。我已经用这些编辑更新了答案。