JS嵌套数组.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'}...]]

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

- Pedro

Answer 1

您可以在外层map函数中使用.flatMap()代替.map()，将内部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);

- Nick Parsons

---

完美，正是我想要的！ - Pedro

@Pedro 不用担心，.flatMap() 是JS的一个新功能，目前并不被所有浏览器支持。我加了一个版本，使用.reduce()，它的浏览器支持更好。 - Nick Parsons

Answer 2

不要嵌套使用 map（导致返回值为二维数组），你可以声明一个新的数组，只将需要的值推入其中。这会产生一个一维数组。

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

const results = [];

data.forEach(d => {
  d.yards.forEach(y => {
    results.push({
      start: d.due_at,
      end: d.due_at,
      title: y.name
    });
  });
});

console.log(results);

- skovy