JavaScript 中 Set 怎么利用原生集合操作实现多个数组的并集计算-js教程-PHP中文网

javascript中set无内置并集方法，但可通过扩展运算符+new set（适合固定数量数组）或reduce+set（适合动态数组）实现并集；注意引用类型去重失效及大数据量时的性能优化。

javascript 中 set 怎么利用原生集合操作实现多个数组的并集计算

JavaScript 的 Set 本身不提供直接的“并集”方法，但可以借助其去重特性和扩展运算符（...）或迭代器，轻松实现多个数组的并集计算——本质是把所有数组元素合并后丢进一个空 Set，它会自动去重。

用 Set 构造函数 + 扩展运算符一次性合并

这是最简洁常用的方式：把多个数组展开后传给 new Set()，再转回数组即可。

语法简单、可读性强，适合已知数组数量（如 2~5 个）的场景
底层原理：扩展运算符将各数组扁平化为参数列表，Set 构造函数接收所有元素并自动排重

示例：

const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const arr3 = [5, 6];

const union = [...new Set([...arr1, ...arr2, ...arr3])]; // [1, 2, 3, 4, 5, 6]

用 reduce + Set 实现动态多数组并集

当数组以集合形式存在（如数组的数组），或需在运行时动态决定参与并集的数组时，用 reduce 更灵活。

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

每次迭代将当前数组的每个元素添加到累积的 Set 中（set.add() 重复添加无副作用）
最后用扩展运算符转为普通数组，保持插入顺序（ES2015+ 中 Set 遍历顺序 = 插入顺序）

示例：

const arrays = [[1, 2], [2, 3, 4], [4, 5]];
const union = [...arrays.reduce((set, arr) => {
  arr.forEach(item => set.add(item));
  return set;
}, new Set())]; // [1, 2, 3, 4, 5]

注意类型与引用值的限制

Set 的去重基于 SameValueZero 算法，对基本类型（数字、字符串、布尔值等）完全可靠；但对对象、数组等引用类型，只比较引用地址，不深比较内容。

[1, 2] 和 [1, 2] 被视为两个不同元素，因为它们是不同对象
若需对象数组去重，应先提取唯一标识（如 id 字段），或改用 Map + 手动逻辑

示例（引用不生效）：

const objArr1 = [{id: 1}, {id: 2}];
const objArr2 = [{id: 2}, {id: 3}];
const unionObj = [...new Set([...objArr1, ...objArr2])]; // 仍是 4 个对象
// 正确做法：先 flatMap 提取 id，再用 Set 去重，最后映射回对象（需额外逻辑）