JavaScript Set.prototype.difference集合差集运算

JavaScript 的 Set.prototype.difference() 方法用于计算两个集合的差集。数学上，集合 $A$ 与集合 $B$ 的差集表示为 $A \setminus B$，结果包含所有属于 $A$ 但不属于 $B$ 的元素。这一方法提供了一种原生、高效的方式来剔除数据集合中的特定部分，无需依赖外部库或手动编写循环逻辑。

1. 基础语法与核心概念

difference() 方法接受一个参数，即要从中减去的集合。调用该方法的集合本身不会发生改变，而是返回一个新的 Set 实例。

查看方法的基本语法结构：

const differenceSet = setA.difference(setB);

在此结构中，setA 是被操作的集合（原集合），setB 是用来做减法的集合（参数集合）。返回值 differenceSet 包含了仅存在于 setA 中的元素。

2. 基础实操：计算数字与字符串差集

掌握该方法最直接的用法是通过简单的数字或字符串集合进行练习。

2.1 数字集合差集

创建两个包含数字的 Set 对象，分别代表库存商品 ID 和已售出商品 ID。运行以下代码获取剩余未售出的商品 ID。

const inventoryIds = new Set([101, 102, 103, 104, 105]);
const soldIds = new Set([102, 105]);

// 计算剩余库存 ID
const remainingIds = inventoryIds.difference(soldIds);

console.log(remainingIds); 
// 输出: Set { 101, 103, 104 }

2.2 字符串集合差集

定义两个包含用户标签的集合。执行差集运算以移除不需要的标签。

const allTags = new Set(['frontend', 'backend', 'devops', 'design']);
const unwantedTags = new Set(['devops', 'design']);

// 提取仅保留的技术栈标签
const activeTags = allTags.difference(unwantedTags);

console.log(activeTags);
// 输出: Set { 'frontend', 'backend' }

3. 深入理解：SameValueZero 算法

difference() 方法使用“SameValueZero”算法进行值的相等性比较。这意味着它不仅能正确区分数字和字符串，还能正确处理 NaN（Not a Number）。

注意在 JavaScript 中，通常 NaN !== NaN，但在 Set 的操作（包括 difference）中，NaN 被视为与自身相等。

验证这一特性，运行以下包含 NaN 的测试代码：

const setA = new Set([1, 2, NaN, 4]);
const setB = new Set([NaN]);

// setB 中的 NaN 会抵消 setA 中的 NaN
const result = setA.difference(setB);

console.log(result);
// 输出: Set { 1, 2, 4 }

4. 传统方法对比

在 difference() 出现之前，开发者通常使用 Array.prototype.filter 或 for...of 循环来实现差集逻辑。

对比原生 difference 方法与传统 filter 方法的实现差异。

4.1 传统 Filter 写法

const setA = new Set(['apple', 'banana', 'cherry']);
const setB = new Set(['banana']);

// 需要先转换为数组或使用循环判断
const traditionalDiff = new Set([...setA].filter(item => !setB.has(item)));

console.log(traditionalDiff);
// 输出: Set { 'apple', 'cherry' }

4.2 原生 Difference 写法

const setA = new Set(['apple', 'banana', 'cherry']);
const setB = new Set(['banana']);

// 直接调用方法
const modernDiff = setA.difference(setB);

console.log(modernDiff);
// 输出: Set { 'apple', 'cherry' }

通过对比可以看出，原生方法省去了展开语法的性能开销以及额外的函数调用，代码语义也更加直观。

5. 进阶场景：链式调用与多重过滤

由于 difference() 返回一个新的 Set 实例，你可以进行链式调用，连续减去多个集合。

假设一个场景：你有一份候选用户列表，需要剔除所有无效用户、被封禁用户以及已退订用户。

执行以下多重过滤步骤：

const allUsers = new Set(['user1', 'user2', 'user3', 'user4', 'user5', 'user6']);
const invalidUsers = new Set(['user3']);
const bannedUsers = new Set(['user1']);
const unsubscribedUsers = new Set(['user6']);

// 链式调用：依次减去三类用户
const validActiveUsers = allUsers
  .difference(invalidUsers)
  .difference(bannedUsers)
  .difference(unsubscribedUsers);

console.log(validActiveUsers);
// 输出: Set { 'user2', 'user4', 'user5' }

这种写法逻辑清晰，每一步都对应一个明确的业务规则。

6. 对象引用的处理（陷阱与注意事项）

当 Set 中存储的是对象时，difference() 比较的是对象的引用，而非对象的内容。即使两个对象的内容完全一致，只要它们的内存引用不同，difference 就不会将它们视为相同元素进行剔除。

观察以下代码中对象引用的处理结果：

const obj1 = { id: 1 };
const obj2 = { id: 2 };

const setA = new Set([obj1, obj2]);
// obj3 内容与 obj1 相同，但引用不同
const obj3 = { id: 1 };
const setB = new Set([obj3]);

const result = setA.difference(setB);

console.log(result);
// 输出: Set { { id: 1 }, { id: 2 } }
// 结果包含 obj1 和 obj2，因为 setB 中的 obj3 并没有引用同一个对象

如果需要根据对象内容计算差集，必须先编写自定义的序列化逻辑或使用 Map 结构辅助处理。

7. 浏览器兼容性与 Polyfill

Set.prototype.difference 是相对较新的 ECMAScript 提案特性。在旧版环境（如未更新到最新版本的 Chrome、Edge、Node.js 或 Safari）中运行可能会报错。

7.1 检查支持情况

在目标环境中执行以下代码检查支持度：

if (typeof Set.prototype.difference !== 'function') {
  console.log('当前环境不支持 Set.prototype.difference');
}

7.2 手动实现 Polyfill

若需在不支持的环境中使用，添加以下 Polyfill 代码：

if (!Set.prototype.difference) {
  Set.prototype.difference = function(other) {
    // 验证参数是否为 Set 对象
    if (!(other instanceof Set)) {
      throw new TypeError('Argument must be a Set');
    }

    // 创建一个新的 Set 用于存放结果
    const result = new Set();

    // 遍历当前集合
    for (const item of this) {
      // 仅当元素不存在于 other 集合中时，添加到结果集
      if (!other.has(item)) {
        result.add(item);
      }
    }

    return result;
  };
}

复制上述代码并在项目入口文件运行，即可确保在任何浏览器中都能正常使用 difference() 功能。