如何使用 Javascript map 方法访问嵌套对象？答案

【问题标题】：How to use Javascript map method to access nested objects?如何使用 Javascript map 方法访问嵌套对象？
【发布时间】：2020-07-14 18:20:46
【问题描述】：

当我运行以下代码并尝试使用 map() 方法访问图像中的“id”时，它给了我未定义的信息。而访问 reId/name/dob/number 和 console.log(d.reId) 是一样的

var data = [
    {
      reId: 'huih23432',
      name: 'skdskdss',
      dob: '26/06/1998',
      number: '34535353543',
      images: {
        "id": 'https://picsum.photos/200',
        "link": 'https://picsum.photos/200',
      },
    },
    {
    "name": "x"
    }


]

data.map((d)=>{
    console.log(d.images.id)
})

我想要一个解决方案，使用 map() 方法本身来访问 id | “图像”键中的链接。

【问题讨论】：

您必须添加对密钥的检查，因为在第二个对象中没有像 d && d.image && d.image.id 这样的图像密钥
这能回答你的问题吗？ Access Javascript nested objects safely

标签： javascript node.js typescript

【解决方案1】：

var data = [
    {
      reId: 'huih23432',
      name: 'skdskdss',
      dob: '26/06/1998',
      number: '34535353543',
      images: {
        "id": 'https://picsum.photos/201',
        "link": 'https://picsum.photos/200',
      },
    },
    {
    "name": "x"
    }


]

data.map((d)=>{

    if (typeof d.images != 'undefined') 
    console.log(d.images.id);
})

【讨论】：

【解决方案2】：

你必须在地图回调中返回

var imageIds = data.map(d=>d.images && d.images.id)
       .filter(id => id); // filter out null elements

【讨论】：

@phnka 这是有效的。但我想知道为什么嵌套对象可以简单地使用 dot(.) 操作符访问？
我需要这种格式的东西 data.map((d)=>{
{d.images.id}
}) 用于我的 React 代码
这实际上不起作用，因为它返回一个带有 id 且未定义的数组。你能解释一下这个符号吗：d=d.images && d.images.id 和 .filter(id=>id)

{d.images.id}