如何将含子数组的数组转换为父对象与子对象同级的新数组？

需求：从包含children子数组属性的bigArray生成新数组，要求每个父对象和它的子对象都成为新数组的独立同级元素，新数组需要同时保留所有父对象（包含完整的children数组）和子对象。

示例输入 #

const bigArray = [
  { 
    bigArrayID: 1, 
    name: 'Xpto', 
    children: [ 
      {childID:1, Name:'XptoChild1'}, 
      {childID:2, Name:'XptoChild2'} 
    ] 
  },
  { 
    bigArrayID: 2, 
    name: 'Foo', 
    children: [ 
      {childID:3, Name:'FooChild1'}, 
      {childID:4, Name:'FooChild2'} 
    ] 
  },
  { 
    bigArrayID: 3, 
    name: 'Bar', 
    children: [ 
      {childID:5, Name:'BarChild1'}, 
      {childID:6, Name:'BarChild2'} 
    ] 
  }
];

期望输出 #

const result = [
  { 
    bigArrayID: 1, 
    name: 'Xpto', 
    children: [ 
      {childID:1, Name:'XptoChild1'}, 
      {childID:2, Name:'XptoChild2'} 
    ] 
  },
  {childID:1, Name:'XptoChild1'},
  {childID:2, Name:'XptoChild2'},
  { 
    bigArrayID: 2, 
    name: 'Foo', 
    children: [ 
      {childID:3, Name:'FooChild1'}, 
      {childID:4, Name:'FooChild2'} 
    ] 
  },
  {childID:3, Name:'FooChild1'},
  {childID:4, Name:'FooChild2'},
  { 
    bigArrayID: 3, 
    name: 'Bar', 
    children: [ 
      {childID:5, Name:'BarChild1'}, 
      {childID:6, Name:'BarChild2'} 
    ] 
  },
  {childID:5, Name:'BarChild1'},
  {childID:6, Name:'BarChild2'}
];

最优解决方案（现代环境） #

用flatMap一步到位，完美适配这个场景：

const result = bigArray.flatMap(item => [item, ...item.children]);

思路解释 #

flatMap是JavaScript数组的实用方法，它结合了map和flat的功能：

• 对每个父对象item，我们返回一个临时数组：[item, ...item.children]——第一个元素是完整保留原结构的父对象，后面用展开运算符...把children的所有子对象拆成独立项。
• flatMap会自动把所有临时数组合并成一个大数组，正好得到你需要的同级结构。

兼容旧环境的方案 #

如果运行环境不支持flatMap（比如IE浏览器），可以用map加concat组合实现：

const result = [].concat(...bigArray.map(item => [item, ...item.children]));

逻辑和上面一致：先通过map生成包含父对象和子对象的临时数组，再用concat把所有临时数组合并成最终结果。

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