如何将JavaScript多维数组合并为一维数组并去除重复元素

实现方案说明 #

首先你对flat()的判断是正确的，对于当前两层结构的数组，用flat()做扁平化是最简洁高效的选择，ES2019及以上标准的运行环境都原生支持该方法，无需额外实现遍历逻辑。

最简实现：flat + 原生Set去重 #

利用Set数据结构自动去重的特性，一行代码即可完成需求：

var sports = [
  ['basketball','fotball','racing'],
  ['fotball','basketball','swimming'],
];

const uniqueResult = [...new Set(sports.flat())];
// 输出结果：['basketball','fotball','racing','swimming']

执行逻辑说明：

1. 先调用sports.flat()将二维数组扁平化为一维数组：['basketball','fotball','racing','fotball','basketball','swimming']
2. 将一维数组传入Set构造函数，自动剔除重复元素
3. 用扩展运算符...将Set实例转回普通数组格式，得到最终结果

兼容/自定义去重方案：flat + filter #

如果需要适配不支持Set的旧环境，或者需要自定义去重判断规则，可以用filter配合indexOf实现：

const flatArr = sports.flat();
const uniqueResult = flatArr.filter((item, index) => {
  // 仅保留元素第一次出现的项
  return flatArr.indexOf(item) === index;
});

如果后续你需要处理更深层级的多维数组，给flat()传入Infinity参数即可实现任意深度的数组扁平化，当前场景默认不传参数（等价于flat(1)）刚好匹配两层数组的处理需求。

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