在ES6之前JavaScript中用于存储数据的主要结构是对象Object和数组Array但它们在某些场景下存在明显局限性比如对象的键只能是字符串或Symbol数组无法快速去重查找元素效率较低。为了解决这些问题ES6引入了两种新的数据结构——Set和Map它们分别对应“无重复值的集合”和“键值对映射”在实际开发中尤其是前端框架、数据处理场景应用广泛。本文将详细讲解Set和Map的核心用法、实例场景及常见误区帮助大家快速上手。一、Set 用法详解1.1 什么是SetSet是一种无序、唯一的集合它里面的每个元素都是唯一的没有重复值。Set本身是一个构造函数用来生成Set实例。核心特点元素不重复自动去重无序不保证插入顺序与遍历顺序一致与Object不同Object在ES6后虽有顺序但本质是“伪有序”可以存储任意类型的值包括基本类型和引用类型没有索引无法通过下标访问元素1.2 Set 基本用法创建增删改查1.2.1 创建Set实例可以通过两种方式创建Set空实例或传入可迭代对象数组、字符串等初始化。// 1. 创建空Set const s1 new Set();// 2. 传入数组初始化自动去重const s2 new Set([1, 2, 2, 3, 3, 3]);console.log(s2); // Set(3) {1, 2, 3}// 3. 传入字符串初始化自动去重const s3 new Set(hello);console.log(s3); // Set(4) {h, e, l, o}l重复被去重// 4. 传入其他可迭代对象如Map、Set本身const s4 new Set(s2); console.log(s4); // Set(3) {1, 2, 3}复制一个Set1.2.2 核心方法增删改查Set的方法较少常用的只有6个记住即可灵活使用方法作用示例add(value)添加元素返回Set本身可链式调用s1.add(1).add(2)delete(value)删除指定元素返回布尔值成功true失败falses2.delete(2) // truehas(value)判断元素是否存在返回布尔值s2.has(3) // trueclear()清空所有元素无返回值s2.clear()size属性获取Set的元素个数类似数组lengthconsole.log(s2.size) // 3forEach()遍历Set回调函数接收value, key, Set本身s2.forEach((val) console.log(val))1.2.3 注意事项避坑点Set的“去重”是基于“严格相等”判断的有两个特殊情况NaN和NaN被认为是相等的虽然NaN NaN为false但Set中会去重undefined和undefined相等null和null相等引用类型对象、数组即使内容相同也会被认为是不同元素因为引用地址不同const s new Set();s.add(NaN); s.add(NaN);console.log(s); // Set(1) {NaN}去重成功s.add({a: 1}); s.add({a: 1});console.log(s); // Set(2) {{a:1}, {a:1}}去重失败引用地址不同1.3 Set 实际应用场景Set的核心优势是“自动去重”和“快速查找”常见应用场景数组去重最常用const arr [1, 2, 2, 3, 4, 4, 5];const uniqueArr [...new Set(arr)]; // [1,2,3,4,5]// 或 Array.from(new Set(arr))判断元素是否存在效率比数组indexOf高尤其是数据量大时存储不重复的标识如用户ID、商品ID数组交集、并集、差集const a new Set([1, 2, 3]);const b new Set([2, 3, 4]);// 并集const union new Set([...a, ...b]); // {1,2,3,4}// 交集const intersection new Set([...a].filter(x b.has(x))); // {2,3}// 差集a - bconst difference new Set([...a].filter(x !b.has(x))); // {1}二、Map 用法详解2.1 什么是MapMap是一种有序的键值对集合它的键可以是任意类型包括基本类型、引用类型这解决了Object键只能是字符串/Symbol的局限性。Map的键是唯一的值可以重复。核心特点键可以是任意类型字符串、数字、对象、Symbol等有序插入顺序与遍历顺序一致这是与Object的核心区别之一键唯一值可以重复可以通过键快速查找值效率比Object高尤其是频繁增删改查场景2.2 Map 基本用法创建增删改查2.2.1 创建Map实例Map可以通过空实例创建或传入“二维数组”每一项是[key, value]初始化也可以传入其他Map实例复制。// 1. 创建空Mapconst m1 new Map();// 2. 传入二维数组初始化const m2 new Map([ [name, 张三], [18, 年龄], [{a: 1}, 对象键], [Symbol(id), 1001] ]);console.log(m2); // Map(4) {name 张三, 18 年龄, {a:1} 对象键, Symbol(id) 1001}// 3. 复制Mapconst m3 new Map(m2);console.log(m3); // 与m2内容一致2.2.2 核心方法增删改查Map的常用方法比Set多一些重点记住以下7个方法/属性作用示例set(key, value)添加/修改键值对键存在则修改值不存在则添加返回Map本身可链式调用m1.set(name, 李四).set(age, 20)get(key)获取指定键的值键不存在返回undefinedm2.get(name) // 张三delete(key)删除指定键值对返回布尔值成功true失败falsem2.delete(18) // truehas(key)判断键是否存在返回布尔值m2.has({a:1}) // false引用地址不同clear()清空所有键值对无返回值m2.clear()size属性获取Map的键值对个数console.log(m2.size) // 4forEach()遍历Map回调函数接收value, key, Map本身m2.forEach((val, key) console.log(key, val))2.2.3 注意事项避坑点1. Map的键唯一性判断与Set一致基于“严格相等”但有两个特殊情况NaN和NaN视为同一个键引用类型的键即使内容相同只要引用地址不同就是不同的键2. Map与Object的区别高频面试题键的类型Map键可以是任意类型Object键只能是字符串/Symbol顺序Map有序ObjectES6前无序ES6后伪有序遍历Map可直接遍历Object需要手动遍历如for...in大小Map可通过size属性获取Object需要手动计算Object.keys(obj).length性能Map在频繁增删改查场景下性能优于Objectconst m new Map();const obj1 {a: 1};const obj2 {a: 1};m.set(obj1, test1); m.set(obj2, test2);console.log(m.get(obj1));// test1 console.log(m.get(obj2)); // test2两个对象键不同2.3 Map 实际应用场景Map的核心优势是“键可以是任意类型”和“有序性”常见应用场景存储复杂键值对如用对象作为键关联对应的数据// 示例用DOM元素作为键存储对应的状态const btn document.querySelector(button);const stateMap new Map();stateMap.set(btn, {disabled: false, text: 点击});// 后续获取按钮状态console.log(stateMap.get(btn).disabled); // false需要保持键值对顺序的场景如表单字段、配置项频繁增删改查的场景如购物车数据、用户会话信息替代Object存储多类型键的场景避免键被自动转为字符串三、Set和Map的区别总结很多开发者会混淆Set和Map这里用一张表格清晰区分方便记忆对比维度SetMap数据结构无重复值的集合只有值无键键值对集合键-值映射核心作用去重、判断元素存在存储键值对、通过键快速查找值元素特点值唯一无序键唯一值可重复有序常用方法add、delete、has、clearset、get、delete、has、clear遍历方式forEach、for...offorEach、for...of可遍历键、值、键值对四、总结Set和Map是ES6中非常实用的数据结构它们弥补了Object和Array的不足在实际开发中可以根据场景灵活选择如果需要去重、判断元素是否存在用Set如数组去重、存储唯一标识如果需要存储键值对、用非字符串作为键用Map如复杂数据映射、保持键值对顺序。掌握它们的基本用法和避坑点能让我们的代码更简洁、高效尤其是在处理大量数据、复杂映射场景时能显著提升开发效率。建议大家动手实践文中的实例加深理解最后如果你觉得本文对你有帮助欢迎点赞、收藏关注我后续分享更多ES6实用技巧