JavaScript进阶③｜Map_Set_WeakMap_WeakSet，新型数据结构

author: 专注前端开发分享JavaScript干货title: JavaScript进阶③Map_Set_WeakMap_WeakSet新型数据结构update: 2026-04-28tags: JavaScript,Map,Set,WeakMap,WeakSet,数据结构,ES6,前端进阶作者专注前端开发分享JavaScript干货更新时间2026年4月适合人群掌握ES6基础想了解新型数据结构的开发者前言为什么需要 Map 和 Set传统对象{}只能用字符串或 Symbol 作为键数组也不能保证元素唯一。ES6 的 Map 和 Set 解决了这些问题。一、Set集合1.1 基本用法// 创建 Set自动去重constsetnewSet([1,2,2,3,3,4]);console.log(set);// Set(4) {1, 2, 3, 4}// 添加元素set.add(5);console.log(set);// Set(5) {1, 2, 3, 4, 5}// 删除元素set.delete(3);console.log(set);// Set(4) {1, 2, 4, 5}// 检查是否存在console.log(set.has(2));// trueconsole.log(set.has(10));// false// 获取大小console.log(set.size);// 4// 清空set.clear();console.log(set.size);// 01.2 Set 的迭代constsetnewSet([苹果,香蕉,橙子]);// for...of 遍历for(constitemofset){console.log(item);}// forEach 遍历set.forEach((value,valueAgain,set){console.log(value);// 注意value 和 valueAgain 相同});// 转数组constarr[...set];console.log(arr);// [苹果, 香蕉, 橙子]1.3 Set 的常见用途// 1. 数组去重constarr[1,2,2,3,3,3,4];constunique[...newSet(arr)];console.log(unique);// [1, 2, 3, 4]// 2. 求并集constset1newSet([1,2,3]);constset2newSet([2,3,4]);constunionnewSet([...set1,...set2]);console.log([...union]);// [1, 2, 3, 4]// 3. 求交集constintersectionnewSet([...set1].filter(xset2.has(x)));console.log([...intersection]);// [2, 3]// 4. 求差集constdifferencenewSet([...set1].filter(x!set2.has(x)));console.log([...difference]);// [1]二、Map映射2.1 基本用法// 创建 MapconstmapnewMap();// 设置键值对键可以是任意类型map.set(name,张三);map.set(123,数字键);map.set(true,布尔键);map.set({},对象键);// 获取值console.log(map.get(name));// 张三console.log(map.get(123));// 数字键// 检查键是否存在console.log(map.has(name));// true// 删除键值对map.delete(name);// 获取大小console.log(map.size);// 3// 清空map.clear();2.2 Map 与 Object 的区别特性MapObject键的类型任意类型字符串或 Symbol键的顺序插入顺序ES2015 保留字符串键的插入顺序大小size属性需要Object.keys(obj).length迭代可直接迭代需要先获取键数组性能频繁增删键值对时更好适合存储固定结构数据2.3 Map 的迭代constmapnewMap([[name,张三],[age,25],[city,北京]]);// for...of 遍历解构for(const[key,value]ofmap){console.log(${key}:${value});}// forEach 遍历map.forEach((value,key){console.log(${key}${value});});// 只遍历键for(constkeyofmap.keys()){console.log(key);}// 只遍历值for(constvalueofmap.values()){console.log(value);}// 转对象键需要是字符串constobjObject.fromEntries(map);console.log(obj);// { name: 张三, age: 25, city: 北京 }2.4 Map 的初始化// 方式1传入二维数组constmap1newMap([[name,张三],[age,25]]);// 方式2从对象创建constobj{name:张三,age:25};constmap2newMap(Object.entries(obj));// 方式3从另一个 Map 创建constmap3newMap(map1);三、WeakMap 和 WeakSet3.1 WeakSet// WeakSet 只能存储对象且是弱引用constweakSetnewWeakSet();letobj{name:张三};weakSet.add(obj);console.log(weakSet.has(obj));// true// 当 obj 不再被引用时会被垃圾回收WeakSet 中的引用不会影响回收objnull;// 现在 weakSet 中的对象可以被回收了// 注意WeakSet 不可迭代也没有 size 属性// weakSet.forEach(...); // ❌ 不存在// console.log(weakSet.size); // ❌ 不存在3.2 WeakMap// WeakMap 的键只能是对象值可以是任意类型constweakMapnewWeakMap();letkey{id:1};weakMap.set(key,值1);console.log(weakMap.get(key));// 值1// 当 key 不再被引用时键值对会被垃圾回收keynull;// 现在 weakMap 中的键值对可以被回收了// 注意WeakMap 不可迭代也没有 size 属性// weakMap.forEach(...); // ❌ 不存在3.3 使用场景// 场景1私有数据WeakMapconstprivateDatanewWeakMap();classUser{constructor(name){this.namename;privateData.set(this,{salary:10000});}getSalary(){returnprivateData.get(this).salary;}}constusernewUser(张三);console.log(user.getSalary());// 10000// privateData 中的用户数据不会阻止 user 被回收// 场景2缓存计算结果WeakMapconstcachenewWeakMap();functionprocess(obj){if(cache.has(obj)){returncache.get(obj);}constresult/* 复杂计算 */obj.name已处理;cache.set(obj,result);returnresult;}四、知识卡数据结构特点用途Set元素唯一任意类型去重、集合运算Map键值对键任意类型需要非字符串键的映射WeakSet弱引用对象集合标记对象、私有数据WeakMap弱引用键值对缓存、私有属性五、课后作业用 Set 实现数组去重并统计每个元素出现的次数用 Map 实现一个简单的 LRU 缓存最近最少使用用 WeakMap 存储 DOM 元素的状态如是否被点击过不阻止垃圾回收有问题欢迎评论区留言大家一起讨论标签JavaScript | Map | Set | WeakMap | WeakSet | 数据结构 | ES6 | 前端进阶