JavaScript过滤多维数组重复元素并合并为单数组求助

你的代码问题出在map的使用上——map会遍历每个子数组并返回处理后的新元素，最终得到的还是和原数组结构一致的二维数组，只是每个子数组内部去重了，并没有把所有元素合并成一维。

要实现合并所有子数组+全局去重的效果，你可以先把多维数组扁平化，再用Set去重，下面是几种可行方案：

方案1：使用flat()扁平化（推荐） #

flat()方法可以直接将多维数组转为一维数组（默认处理二维，传Infinity可处理任意深度），配合Set就能一步到位：

const arr = [
  [1, 2],
  [1, 2, 3]
];

const result = [...new Set(arr.flat())];
console.log(result); // 输出：[1, 2, 3]

如果是更深层级的多维数组，比如[1, [2, [3, 2], 4]]，只需要给flat()传Infinity参数：

const deepArr = [1, [2, [3, 2], 4]];
const deepResult = [...new Set(deepArr.flat(Infinity))];
console.log(deepResult); // 输出：[1, 2, 3, 4]

方案2：用concat手动扁平化 #

如果环境不支持flat()（比如旧版浏览器），可以用concat来实现扁平化：

const arr = [
  [1, 2],
  [1, 2, 3]
];

// 先把所有子数组合并成一维
const flattened = Array.prototype.concat.apply([], arr);
// 再去重
const result = [...new Set(flattened)];
console.log(result); // 输出：[1, 2, 3]

为什么原代码不行？ #

再回头看你的代码：

const result = arr.map((res) => [...new Set(res)]);

这段代码只是对每个子数组[1,2]和[1,2,3]分别去重（但这两个子数组本身内部没有重复，所以结果还是[[1,2], [1,2,3]]），完全没做合并操作，自然得不到[1,2,3]。

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