如何提取嵌套对象数组的值？答案

【问题标题】：How to extract value of nested object array?如何提取嵌套对象数组的值？
【发布时间】：2017-12-17 04:48:10
【问题描述】：

我正在尝试提取对象数组的所有链接 ID，如下所示。这就是我试图得到的：

const linkIDs = array
  .filter(d => d.links)
  .map(d => d.links)

但这给了我一个嵌套数组，这不是我想要的。

[
  {
    "id: "1",
    "links": [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "article"
        },
      {
            "id" : "PGhkJXDn59y87paiZ",
            "type" : "article"
        }
    ]
  },
  {
    "id: "2",
    "links": [
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "article"
        }
    ]
  },
  {
    "id": "3"
  }
]

所以在这个例子中我需要结果

[ "Dn59y87PGhkJXpaiZ", "PGhkJXDn59y87paiZ", "GhkJXpaiZDn59y87P" ]

【问题讨论】：

标签： javascript arrays ecmascript-6

【解决方案1】：

您可以像下面那样做，而无需使用任何其他库。

var data = [
  {
    "id": "1",
    "links": [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "article"
        },
       {
            "id" : "PGhkJXDn59y87paiZ",
            "type" : "article"
        }
    ]
  },
  {
    "id": "2",
    "links": [
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "article"
        }
    ]
  },
  {
    "id": "3"
  }
];

var result = data.filter(e => e.links)
                 .map(e => e.links.map(link => link.id))
                 .reduce((a, b) => a.concat(b), []);
                
console.log(result);

【讨论】：

【解决方案2】：

您需要在映射之前生成数组。 Reduce 在 Js 中是非常有用的功能 ;)

arr = [
  {
    "id": "1",
    "links": [
        {
            "id" : "Dn59y87PGhkJXpaiZ",
            "type" : "article"
        },
      {
            "id" : "PGhkJXDn59y87paiZ",
            "type" : "article"
        }
    ]
  },
  {
    "id": "2",
    "links": [
        {
            "id" : "GhkJXpaiZDn59y87P",
            "type" : "article"
        }
    ]
  },
  {
    "id": "3"
  }
];

var result = arr.filter(a=>a.links).reduce((acc, a) => {
 return acc.concat(a.links)
}, []).map(a=>a.id);
console.log(result);

【讨论】：

【解决方案3】：

您可以使用 lodash 的 flatMap() ，其中每个过滤的项目都使用 map() 进行转换。

演示

var data = [
  {
    "id": 1,
    "links": [
      {
        "id": "Dn59y87PGhkJXpaiZ",
        "type": "article"
      },
      {
        "id": "PGhkJXDn59y87paiZ",
        "type": "article"
      }
    ]
  },
  {
    "id": "2",
    "links": [
      {
        "id": "GhkJXpaiZDn59y87P",
        "type": "article"
      }
    ]
  },
  {
    "id": "3"
  }
];
var result =  _.flatMap(data, item => 
  _(item.links)
    .map(v => (v.id))
    .value()
);
           
console.log(result);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.js"&gt;&lt;/script&gt;

【讨论】：

输出不一样，也需要使用另外一个lib。
@DanielTran 更新，检查