Angular 9项目中构建甘特图时如何扁平化多维数组

在Angular 9里处理这种二维数组扁平化其实很简单，给你几种常用的TypeScript/JavaScript方法，都能快速得到你需要的一维数组：

方法1：使用Array.flat()（最简洁） #

ES6+提供的flat()方法可以直接拉平数组，对于你的二维数组，不传参数就会默认拉平一层，完全符合需求：

// 你的原始二维数组
const dateGroups = [
  [{ "title": "01" }, { "title": "02" }, ..., { "title": "31" }],
  [{ "title": "01" }, { "title": "02" }, ..., { "title": "29" }]
];

// 扁平化处理
const flattenedDates = dateGroups.flat();

如果以后遇到更深层次的嵌套数组，还可以给flat()传参数指定拉平的层级，比如flat(3)处理三维数组。

方法2：扩展运算符+Array.concat() #

如果担心环境兼容性（不过Angular 9的编译配置基本都支持ES6+，但这个方法兼容性更广），可以用扩展运算符配合concat()：

const flattenedDates = [].concat(...dateGroups);

原理是用扩展运算符...把二维数组的每个子数组展开，再通过concat()合并成一个新数组。

方法3：使用Array.reduce() #

如果你想手动控制合并逻辑，reduce()是个很灵活的选择：

const flattenedDates = dateGroups.reduce((accumulator, currentGroup) => {
  return accumulator.concat(currentGroup);
}, []);

这里reduce()会遍历每个子数组，把它们依次合并到初始为空的累加器数组里，最终得到一维数组。

这三种方法都是纯函数，不会修改你的原始数组，非常适合Angular组件里的数据处理场景，放心用在甘特图的日期序列渲染就好。

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