大家好，今天我们来聊聊前端开发中既熟悉又陌生的数据结构——Set。作为 ES6 引入的"集合"类型，Set 凭借独特的性能和功能，正成为解决数据去重、集合运算等场景的利器。尤其在 2024 年，随着几个重要 API 的标准化和浏览器支持升级，它的实用性更上一层楼！

1. 数据结构决定性能
Set 的底层是哈希表实现，这使得它的增删查改操作时间复杂度都是 O(1)。对比传统数组的 indexOf 方法（时间复杂度 O(n)），当处理百万级数据时，Set 的耗时可能只有数组的 1/300。比如去重 100 万条数据：

// 数组去重：约30秒
const arr = [...百万数据];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

// Set去重：约0.1秒
const uniqueSet = [...new Set(arr)];

2. 特殊值的处理更智能
Set 能正确处理 JavaScript 中的特殊值：

const weirdData = [0, -0, NaN, NaN, "5", 5];
console.log([...new Set(weirdData)]); 
// 输出：[0, NaN, "5", 5]（自动去重+类型区分）

2024 年值得关注的 Set 新 API

2025年 Set 迎来了三个重要更新，极大提升了开发效率：

1. Set.prototype.union()
并集运算现在只需一行代码：

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
console.log(setA.union(setB)); // Set {1, 2, 3, 4, 5} 

2.
Set.prototype.intersection()
交集运算告别繁琐的 filter：

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const common = setA.intersection(setB);
console.log(common); // Set {3}

3. Set.prototype.difference()
差集运算直接获取独有元素：

console.log(setA.difference(setB)); // Set {1, 2}

这些方法在 Chrome 122+、Safari 17+ 等现代浏览器中已原生支持，并成为 Baseline 功能。

Set 的实战技巧与避坑指南

场景 1：海量数据去重
推荐使用 Array.from(new Set(data))，比传统方法快 2-3 个数量级。但要注意：

• 对象类型去重要用 JSON.stringify 转换
• 保留顺序需求需谨慎（Set 不保证插入顺序）

场景 2：权限校验
利用集合运算快速判断权限交集：

const userRoles = new Set(['edit', 'view']);
const requiredRoles = new Set(['edit', 'delete']);
const hasPermission = userRoles.intersection(requiredRoles).size > 0;

避坑提醒：

• 不要用 set[0] 这样的索引访问（改用迭代器）
• 频繁修改的场景建议用数组（如排序、分页）

四、高频面试题精选

1. Set 和 Array 去重的性能差异原理是什么？
   （答：哈希表 vs 线性搜索，时间复杂度 O(1) vs O(n)）
2. 如何用 Set 实现数组交集？
   （答：[...new Set(arr1)].filter(x => new Set(arr2).has(x)) 或 2024 新 API）
3. Set 如何处理 NaN 和 ±0？
   （答：NaN 视为相同，+0 和 -0 等价）
4. WeakSet 和 Set 的核心区别？
   （答：弱引用、仅存储对象、无迭代方法）
5. 2024 年新增的 Set 方法有哪些应用场景？
   （答：权限系统、数据分析、购物车比价等需要集合运算的场景）

从性能怪兽到语法糖升级，Set 正在前端开发中扮演越来越重要的角色。特别是在处理大数据量和复杂集合运算时，合理运用 Set 能让代码既简洁又高效。2024 年的新 API 更是如虎添翼，建议大家在支持的环境中积极尝试！