js数组交集并集差集

2026-05-11 13:00:25 1019阅读 0评论

别让数组操作拖慢页面：JS 交并差集的最佳实践

在后台管理系统里，处理权限标签或者同步用户数据时，我们常常会遇到这样的场景：需要将两组数据进行比对，找出共同拥有的权限（交集），合并所有不重复的选项（并集），或者剔除已存在的项（差集）。很多新人习惯用两层 for 循环硬解，随着数据量上升，页面卡顿的风险也在增加。其实，现代 JavaScript 已经提供了更优雅的解决方案，关键在于如何平衡代码简洁性与执行效率。

基础篇：利用 Set 结构优化常规运算

对于数字或字符串等基础数据类型，ES6 的 Set 是解决重复值和集合运算的神器。它的查找效率远高于原生数组方法。

获取交集时，如果依然使用 arr1.filter(item => arr2.includes(item))，在大数据量下时间复杂度会退化为 O(n²)。更优的做法是将其中一个数组转为 Set 实现 O(1) 查找：

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
// 交集：将 arr2 转 Set，提高 includes 查找速度
const intersection = arr1.filter(x => new Set(arr2).has(x));

计算并集则更加简单直接，利用扩展运算符配合 Set 去重即可一行搞定：

// 并集：合并后自动去重
const union = [...new Set([...arr1, ...arr2])];

至于差集（即在 A 中但不在 B 中的元素），逻辑核心依然是过滤，只需把判断条件反过来：

// 差集：保留 arr1 中存在且 arr2 中不存在的数据
const difference = arr1.filter(x => !new Set(arr2).has(x));

上述方案在处理几万条以内的基础数据时完全够用，但在实际项目中，我们遇到的往往不是简单的数字列表。

进阶篇：对象数组的比较陷阱

真实业务中，待比对的往往是包含 ID、名称的对象数组。此时直接使用 includes 或 has 会失效，因为它们比较的是内存引用地址，而非内容值。

若两个对象结构相同仅属性顺序不同，JSON.stringify 虽然看似可行，却存在隐患：键值顺序不稳定会导致结果错误。例如 {a:1, b:2} 和 {b:2, a:1} 序列化后并不相等。

针对这种情况，更稳妥的方案是提取唯一标识符进行比较。假设每个对象都有 id 字段：

const usersA = [{ id: 101 }, { id: 102 }];
const usersB = [{ id: 102 }, { id: 103 }];

// 将 B 中的 id 存入 Set，再筛选 A 中的对象
const idsB = new Set(usersB.map(u => u.id));
const commonUsers = usersA.filter(user => idsB.has(user.id));

这种方式既保留了对象的完整性，又利用了 Set 的高性能查找特性。切记，除非确定 JSON 输出格式绝对可控，否则尽量通过主键进行关联运算，避免深层对比带来的性能开销。