如何利用 Set 快速识别两个数组的差异：在前端 Diff 算法中的实践-js教程-PHP中文网

set适合识别元素级增删差异（如a-b、b-a）、判断无序去重后是否相等，但无法处理位置变化、重复次数、嵌套结构或生成补丁，也不能替代虚拟dom的树结构diff算法。

如何利用 set 快速识别两个数组的差异：在前端 diff 算法中的实践

Set 本身不是 Diff 算法，但它能高效解决一类特定差异问题：**判断两个数组是否存在元素级增删（忽略顺序与重复）**。在前端实际开发中，它常作为轻量级预处理或辅助手段，配合真正的 Diff 算法使用，而不是替代后者。

Set 适合识别哪类“差异”

Set 基于哈希查找，天然支持 O(1) 的成员判断，因此特别适合快速得出以下结论：

哪些元素只在数组 A 中存在（A - B）：用 Set 构建 B，遍历 A，过滤出不在 B 中的项
哪些元素只在数组 B 中存在（B - A）：同理，用 Set 构建 A，遍历 B
两个数组是否完全相同（浅层、无序、去重）：比较 size + 每个元素是否双向存在

注意：它无法反映位置变化、重复次数变化、嵌套结构变化，也不生成“补丁”（patch），更不适用于虚拟 DOM 节点比对——这些必须依赖基于树结构或 LCS 的 Diff 算法。

典型代码实现（元素级差集）

以识别新增和删除的 ID 列表为例：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

function getArrayDiff(a, b) {
  const setA = new Set(a);
  const setB = new Set(b);
<p>const onlyInA = [...a].filter(x => !setB.has(x)); // A 有、B 没有（如删除项）
const onlyInB = [...b].filter(x => !setA.has(x)); // B 有、A 没有（如新增项）</p><p>return { added: onlyInB, removed: onlyInA };
}</p><p>// 示例
const oldIds = [1, 2, 3];
const newIds = [2, 3, 4, 5];
console.log(getArrayDiff(oldIds, newIds));
// → { added: [4, 5], removed: [1] }
</p>

这种写法简洁、可读性强，适合权限列表变更、标签筛选、缓存键同步等场景。