ES6的Set数据结构：从数组去重到高效数据管理

张

张建站

2026/4/15 9:52:07

10分钟阅读

1. 为什么你需要了解Set数据结构第一次遇到数组去重问题时我像大多数新手一样写了这样的代码function unique(arr) { let result []; for (let i 0; i arr.length; i) { if (result.indexOf(arr[i]) -1) { result.push(arr[i]); } } return result; }直到有一天项目里有个10万条数据的数组需要去重这段代码直接让页面卡死了5秒。这就是我转向Set数据结构的转折点。用Set改造后function unique(arr) { return [...new Set(arr)]; }同样的数据量执行时间从5秒降到了50毫秒性能提升了100倍这就是ES6的Set数据结构给我的震撼教育。Set本质上是一种集合类型它最大的特点就是所有元素都是唯一的。想象你有一个装彩色球的盒子Set就像是个智能盒子当你试图放入两个颜色相同的球时它会自动过滤掉重复的球。这种特性让它在处理唯一性数据时特别高效。与数组相比Set有几个显著优势查找速度更快判断元素是否存在的时间复杂度是O(1)而数组的indexOf是O(n)自动去重添加重复元素时不会报错只是静默忽略更语义化当你要处理的数据本身就是数学上的集合概念时用Set比用数组更符合直觉2. Set的基本操作从创建到增删改查2.1 创建和初始化Set创建Set有三种常见方式// 1. 创建空Set const emptySet new Set(); // 2. 用数组初始化 const numSet new Set([1, 2, 3, 4]); // 3. 用字符串初始化会自动拆分为字符 const charSet new Set(hello); console.log(charSet); // Set(4) {h, e, l, o}实际项目中我经常用第三种方式快速获取字符串中的唯一字符。比如统计用户输入的所有不重复标签const tags 科技,互联网,人工智能,科技,AI; const uniqueTags [...new Set(tags.split(,))]; console.log(uniqueTags); // [科技, 互联网, 人工智能, AI]2.2 增删查操作Set的API设计得非常简洁主要方法就四个const mySet new Set(); // 添加元素 mySet.add(1).add(2).add(3); // 可以链式调用 // 检查存在 console.log(mySet.has(2)); // true // 删除元素 mySet.delete(2); console.log(mySet.has(2)); // false // 清空集合 mySet.clear(); console.log(mySet.size); // 0这里有个实用技巧因为add()方法返回Set本身所以可以链式调用。这在批量添加数据时特别方便const set new Set() .add(苹果) .add(香蕉) .add(橙子);2.3 大小和类型判断Set的size属性可以获取元素数量这比数组的length更准确因为它已经自动去重了const dupArr [1, 2, 2, 3, 3, 3]; console.log(dupArr.length); // 6 console.log(new Set(dupArr).size); // 3关于类型判断有个特殊点需要注意在Set中NaN被视为相同的值const set new Set(); set.add(NaN); set.add(NaN); console.log(set.size); // 1这是Set为数不多的例外情况因为在JavaScript中NaN NaN的结果是false但Set内部做了特殊处理。3. Set的高级应用不只是数组去重3.1 复杂数据结构的去重方案虽然Set不能直接处理对象去重但配合JSON.stringify可以解决简单对象去重问题const objArr [ {id: 1, name: 张三}, {id: 2, name: 李四}, {id: 1, name: 张三} ]; const uniqueObjArr [ ...new Map( objArr.map(obj [JSON.stringify(obj), obj]) ).values() ];对于更复杂的场景比如要根据某个属性去重可以这样处理const users [ {id: 1, name: Alice}, {id: 2, name: Bob}, {id: 1, name: Alice} ]; const uniqueUsers [ ...new Map(users.map(user [user.id, user])).values() ];3.2 集合运算的实现利用Set可以轻松实现数学上的集合运算// 并集 function union(setA, setB) { return new Set([...setA, ...setB]); } // 交集 function intersection(setA, setB) { return new Set([...setA].filter(x setB.has(x))); } // 差集 function difference(setA, setB) { return new Set([...setA].filter(x !setB.has(x))); }这些方法在处理标签系统、权限系统时特别有用。比如获取用户新增的权限const oldPermissions new Set([read, write]); const newPermissions new Set([read, delete]); const added difference(newPermissions, oldPermissions); console.log(added); // Set(1) {delete}3.3 性能敏感场景的应用在需要频繁检查元素是否存在的场景Set的性能优势非常明显。比如实现一个敏感词过滤系统const sensitiveWords new Set([暴力, 色情, 政治]); function containsSensitiveWord(text) { return text.split().some(word sensitiveWords.has(word)); }根据我的测试当敏感词库达到10万条时Set方案的性能仍然是数组方案的100倍以上。4. Set的遍历与转换4.1 多种遍历方式对比Set提供了四种遍历方法各有适用场景const colorSet new Set([red, green, blue]); // 1. for...of直接遍历 for (const color of colorSet) { console.log(color); } // 2. forEach方法 colorSet.forEach((value, _valueAgain, set) { console.log(value); }); // 3. 获取迭代器 const iterator colorSet.values(); console.log(iterator.next().value); // red // 4. 转换为数组后遍历 [...colorSet].map(color console.log(color));需要注意的是Set的forEach回调函数有三个参数前两个都是当前元素的值这是为了保持与Map的API一致性。4.2 与其他数据结构的转换Set与数组的转换是最常见的操作// Set转数组 const set new Set([1, 2, 3]); const arr1 [...set]; const arr2 Array.from(set); // 数组转Set const newSet new Set([1, 2, 3]);更复杂的转换场景包括// Set转Map const setToMap new Map([...mySet].map(item [item, item])); // Map转Set const mapToSet new Set(myMap.values());4.3 实际案例实现一个投票系统假设我们要实现一个防止重复投票的系统class VotingSystem { constructor() { this.voters new Set(); this.votes new Map(); } vote(voterId, candidate) { if (this.voters.has(voterId)) { console.log(您已经投过票了); return false; } this.voters.add(voterId); this.votes.set(candidate, (this.votes.get(candidate) || 0) 1); return true; } getResults() { return [...this.votes.entries()]; } }这个实现利用了Set来高效检查重复投票比用数组方案要高效得多。

2025年网盘文件高速下载终极方案：LinkSwift直链提取工具完整指南

2025年网盘文件高速下载终极方案：LinkSwift直链提取工具完整指南【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持百度网盘 / 阿里云盘 / 中国移动云…...

2026/4/15 9:50:31 阅读更多 →

AI存储数据生命周期管理系统功率MOSFET选型方案：高效可靠电源与热管理驱动适配指南

随着人工智能与大数据技术的飞速发展，AI存储数据生命周期管理系统已成为数据中心与边缘计算节点的核心基础设施。其电源管理、风扇散热及模块化控制电路作为系统“能量与体温调节中枢”，需为存储阵列、计算单元、散热风扇等关键负载提供精准、高效且可靠…...

2026/4/15 9:49:34 阅读更多 →

如何高效使用Adobe-GenP 3.0：专业用户的Adobe Creative Cloud完整破解指南

如何高效使用Adobe-GenP 3.0：专业用户的Adobe Creative Cloud完整破解指南【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe-GenP 3.0是一款强大的A…...

2026/4/15 9:49:32 阅读更多 →

为了过等保，我们给200+服务器做了OpenSSH 10.0自动化升级，这是完整复盘

企业级OpenSSH 10.0自动化升级实战：从合规需求到批量落地当安全合规成为企业IT建设的刚性需求，基础组件的漏洞修复便从技术问题升级为战略任务。去年某次内部审计中，我们发现全公司237台服务器中，68%的OpenSSH版本存在高危漏洞&a…...

2026/4/14 13:22:25 阅读更多 →

用AI给显示器装上‘眼睛’：复旦博士的EyeReal方案，如何用三层LCD和RTX 4090实现桌面级裸眼3D？

EyeReal技术解析：三层LCDRTX 4090如何重构裸眼3D显示范式当24英寸显示器上跃然而出的立体影像不再需要特制眼镜时，我们或许正站在显示技术革命的临界点。复旦大学马炜杰博士团队发表在《Nature》的EyeReal方案，用三层普通LCD面板和消费级显卡…...

2026/4/14 6:20:39 阅读更多 →

5步轻松打造个人离线小说图书馆：番茄小说下载器完全指南

5步轻松打造个人离线小说图书馆：番茄小说下载器完全指南【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 番茄小说下载器是一款功能强大的开源工具，专为…...

2026/4/14 13:25:48 阅读更多 →