如何用ES6 Map处理对象数组，无扩展运算符合并嵌套组件为一维数组

首先，我明白你要处理的场景：你有一个包含嵌套components数组的对象数组data，已经通过第一个map得到了二维的components数组，现在需要把这个二维数组合并成纯一维数组，而且不能使用扩展运算符...。

先给出一个典型的输入示例，方便我们理解场景：

const data = [
  { id: 1, components: [ { name: 'comp1' }, { name: 'comp2' } ] },
  { id: 2, components: [ { name: 'comp3' } ] },
  { id: 3, components: [ { name: 'comp4' }, { name: 'comp5' }, { name: 'comp6' } ] }
];

你提到的第一步用map提取二维数组是完全没问题的：

const twoDimensionalArr = data.map(item => item.components);
// 此时 twoDimensionalArr 的值为：[[{name: 'comp1'}, {name: 'comp2'}], [{name: 'comp3'}], [{name: 'comp4'}, {name: 'comp5'}, {name: 'comp6'}]]

不过这里要纠正一个小误解：map方法无法完成二维数组到一维数组的合并，因为map的核心是“一对一”转换，会保持数组长度和原数组一致。所以我们需要用reduce配合concat来完成合并（完全符合ES6规范，且不需要扩展运算符）。

完整的链式实现代码如下：

const flattenedComponents = data
  .map(item => item.components) // 第一步：提取所有components子数组，得到二维数组
  .reduce((accumulator, currentArr) => accumulator.concat(currentArr), []); // 第二步：合并为一维数组

代码细节解释： #

• reduce的第一个参数是回调函数：我们初始化累加器accumulator为空数组[]，每次迭代时，用concat把当前的子数组currentArr的所有元素合并到累加器中。
• concat方法本身就支持接收数组作为参数，会自动把数组中的元素展开合并到目标数组里，完全不需要依赖...扩展运算符。

执行这段代码后，flattenedComponents就是你需要的一维数组：

// 最终输出结果：
[
  { name: 'comp1' },
  { name: 'comp2' },
  { name: 'comp3' },
  { name: 'comp4' },
  { name: 'comp5' },
  { name: 'comp6' }
]

如果你的运行环境支持ES2019及以上，也可以用更简洁的flat()方案，同样不需要扩展运算符：

const flattenedComponents = data.map(item => item.components).flat();

不过如果需要严格兼容ES6环境，reduce + concat的方案会更稳妥。

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