JS 嵌套 array.map

Question

您好，我有以下数据：

data = [{due_at: '2019-09-10', yards:[{name: 'test'},{name: 'test2'}]}...]

我想迭代这个日期以产生：

events = [{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]

我尝试使用以下嵌套地图：

events = data.map(d => {
    return d.yards.map(y => {
      return {
        start: d.due_at,
        end: d.due_at,
        title: y.name
      };
    });
  });

这在一定程度上有效，但我不断返回一个嵌套数组，如下所示：

[[{start: '2019-09-10', end: '2019-09-10, title: 'test'},{start: '2019-09-10', end: '2019-09-10, title: 'test2'}...]]

如何调整地图代码以输出单个对象数组？

Answer 1

您可以使用.flatMap()而不是.map()在外部映射函数上将内容“展平”到内部映射函数的结果数组中：

const data = [{
  due_at: '2019-09-10',
  yards: [{
    name: 'test'
  }, {
    name: 'test2'
  }]
}];

const events = data.flatMap(d => {
  return d.yards.map(y => {
    return {
      start: d.due_at,
      end: d.due_at,
      title: y.name
    };
  });
});

console.log(events);

但是，.flatMap()目前没有最好的浏览器支持，因此，如果您想要更多的浏览器兼容性，您可以.reduce()使用.flatMap()：

const data = [{
  due_at: '2019-09-10',
  yards: [{
    name: 'test'
  }, {
    name: 'test2'
  }]
}];

const events = data.reduce((a, {due_at: start, yards}) => 
  [...a, ...yards.map(({name:title}) => ({start, end: start, title}))],
[]);

console.log(events);