如何扁平化JS对象数组？展开指定数组字段并复制其余字段

需求很明确：将包含数组类型字段c的对象数组展开，每个c数组中的元素对应一个新对象，同时把原对象的其他字段（比如a、b）复制到每个新对象中。

最优实现：使用Array.flatMap() #

flatMap()是最简洁高效的方案，它结合了map()和flat()的功能，一步完成映射与扁平化操作，代码可读性和执行效率都很高：

const originalArray = [{
  a: { x: 1 },
  b: { y: 2 },
  c: [{ z: 3 }, { z: 4 }]
}];

const flattenedArray = originalArray.flatMap(item => {
  // 对每个原对象，遍历其c数组生成新对象
  return item.c.map(cItem => ({
    // 复制原对象的非c字段
    ...item,
    // 替换c为当前遍历到的元素
    c: cItem
  }));
});

console.log(flattenedArray);

执行后得到的结果就是你需要的结构：

[
  { a: { x: 1 }, b: { y: 2 }, c: { z: 3 } },
  { a: { x: 1 }, b: { y: 2 }, c: { z: 4 } }
]

兼容旧环境方案：使用Array.reduce() #

如果需要兼容不支持flatMap()的旧环境（比如IE），可以用reduce()替代，逻辑同样清晰：

const flattenedArray = originalArray.reduce((acc, item) => {
  // 将每个c元素对应的新对象推入累加数组
  item.c.forEach(cItem => {
    acc.push({ ...item, c: cItem });
  });
  return acc;
}, []);

关键点说明 #

• 使用对象展开运算符...复制原对象的非c字段，确保不会修改原对象（浅拷贝，若字段是引用类型会共享内存，如需深拷贝可结合JSON.parse(JSON.stringify())或专门的深拷贝工具函数）
• flatMap()自动处理映射后的数组扁平化，无需额外调用flat()
• 两种方案的时间复杂度都是O(n*m)，其中n是原数组长度，m是每个对象中c数组的平均长度，属于最优的时间复杂度

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