如何在JavaScript中将嵌套数组合并为包含主对象信息的指定数组？

原始代码与问题 #

const data = [{ id: 1, items: [{ id: 1, name: 'R1'}]},{id: 2, items: [{ id: 1, name: 'R2'},{ id: 1, name: 'R3'}]}];

// 原错误实现
data.map((item) => item.items).data.reduce((acc, curr) => acc.concat(curr), [])
 
console.log(data)

当前输出仅包含嵌套数组元素：

[
  { id: 1, name: 'R1'},
  { id: 1, name: 'R2'},
  { id: 1, name: 'R3'}
]

预期输出需要同时包含主对象的id信息和嵌套数组元素：

[
  { id: 1 },
  { id: 1, name: 'R1' },
  { id: 2 },
  { id: 1, name: 'R2'},
  { id: 1, name: 'R3'}
];

正确实现方案 #

方案1：使用flatMap #

flatMap可以遍历数组并自动展平返回的子数组，刚好适配这种需要在主对象信息后拼接嵌套元素的场景：

const data = [{ id: 1, items: [{ id: 1, name: 'R1'}]},{id: 2, items: [{ id: 1, name: 'R2'},{ id: 1, name: 'R3'}]}];

const result = data.flatMap(item => [
  { id: item.id }, // 插入主对象的id信息
  ...item.items    // 展开嵌套的items数组
]);

console.log(result);

方案2：使用reduce #

如果需要更手动的流程控制，reduce也能实现相同效果：

const data = [{ id: 1, items: [{ id: 1, name: 'R1'}]},{id: 2, items: [{ id: 1, name: 'R2'},{ id: 1, name: 'R3'}]}];

const result = data.reduce((acc, item) => {
  acc.push({ id: item.id }); // 添加主对象id
  acc.push(...item.items);   // 添加嵌套数组的所有元素
  return acc;
}, []);

console.log(result);

原代码问题说明 #

1. 笔误：第一个对象的属性名写成了iitems，应该改为items，否则无法正确获取嵌套数组；
2. 语法错误：data.map(...)返回的是数组，没有.data属性，调用.data.reduce会直接报错。

内容的提问来源于stack exchange，提问作者COD3