Map和Set是ES6引入的高效数据结构，Map支持任意类型键、保持插入顺序且性能更优，适用于动态键值对存储；Set确保值唯一，常用于数组去重和快速查找。WeakMap与WeakSet通过弱引用避免内存泄漏，适合关联对象元数据。
JavaScript中的
Map
和
Set
，简单来说，它们是ES6引入的两种新的数据结构，用来解决传统JavaScript对象和数组在特定场景下的局限性。
Map
提供了一种更灵活的键值对存储方式，而
Set
则专注于存储独一无二的值。在我看来，它们是现代JS开发中提升代码可读性、效率和健壮性的利器。
解决方案
理解
Map
和
Set
，关键在于把握它们各自的核心能力。
Map：更强大的键值对集合
在ES6之前，我们通常会用普通JavaScript对象（
{}
）来模拟键值对存储，也就是所谓的“哈希表”或“字典”。但这玩意儿其实有不少限制，比如对象的键只能是字符串或Symbol，如果你想用一个对象或者函数作为键，那就不行了，它会被隐式转换成字符串，导致意想不到的覆盖。而且，遍历对象的键值对，其顺序在ES2015之前也并非完全可靠。
Map
的出现，就是为了解决这些痛点。它是一个真正的键值对集合，它的强大之处在于：
键可以是任何数据类型：你可以用对象、函数、甚至其他
Map
实例作为键。这打开了非常多的可能性，比如你可以把DOM元素作为键，来存储与该元素相关的特定数据，而不用在DOM元素上直接添加自定义属性。保持插入顺序：
Map
会记住键值对的插入顺序，当你遍历
Map
时，会按照这个顺序来。这对于某些需要顺序敏感的场景非常有用。性能优化：在频繁添加和删除键值对时，
Map
的性能通常比普通对象更好。内置
size
属性：可以直接获取
Map
中元素的数量，而不用像对象那样需要
Object.keys(obj).length
。
常用方法：
new Map()
: 创建一个空的Map。
map.set(key, value)
: 添加或更新一个键值对。
map.get(key)
: 获取指定键的值。
map.has(key)
: 检查Map中是否存在某个键。
map.delete(key)
: 删除指定键的键值对。
map.clear()
: 清空Map。
map.size
: 返回Map中键值对的数量。
const myMap = new Map();const objKey = { id: 1 };const funcKey = () => console.log('I am a key');myMap.set('name', 'Alice');myMap.set(objKey, '这是一个对象作为键的值');myMap.set(funcKey, '这是一个函数作为键的值');myMap.set(123, '数字键');console.log(myMap.get('name')); // Aliceconsole.log(myMap.get(objKey)); // 这是一个对象作为键的值console.log(myMap.has('name')); // trueconsole.log(myMap.size); // 4myMap.delete(123);console.log(myMap.size); // 3// 遍历Mapfor (const [key, value] of myMap) { console.log(`${typeof key}: ${key} => ${value}`);}// 输出示例:// string: name => Alice// object: [object Object] => 这是一个对象作为键的值// function: () => console.log('I am a key') => 这是一个函数作为键的值
Set：独一无二值的集合
Set
则是一种只存储不重复值的集合。如果你有一个数组，想快速去除重复项，或者需要一个高效的方式来检查某个值是否存在于一个集合中，
Set
就是你的好帮手。
值唯一性：
Set
中的每个值都是唯一的。当你尝试添加一个已经存在的值时，
Set
会忽略这次操作。保持插入顺序：和
Map
一样，
Set
也会记住值的插入顺序。内置
size
属性：直接获取
Set
中元素的数量。
常用方法：
new Set()
: 创建一个空的Set。
set.add(value)
: 添加一个值。如果值已存在，则不进行任何操作。
set.has(value)
: 检查Set中是否存在某个值。
set.delete(value)
: 删除指定值。
set.clear()
: 清空Set。
set.size
: 返回Set中值的数量。
const mySet = new Set();mySet.add(1);mySet.add(5);mySet.add('text');mySet.add(1); // 再次添加1，不会有任何效果console.log(mySet.size); // 3console.log(mySet.has(5)); // trueconsole.log(mySet.has(2)); // falseconst arr = [1, 2, 2, 3, 4, 4, 5];const uniqueArr = [...new Set(arr)]; // 快速去重console.log(uniqueArr); // [1, 2, 3, 4, 5]// 遍历Setfor (const value of mySet) { console.log(value);}// 输出示例:// 1// 5// text
Map和Object有什么区别？什么时候该用Map，什么时候用Object？
这真的是一个非常核心的问题，很多初学者会混淆。在我看来，
Map
和
Object
虽然都能存储键值对，但它们的“设计哲学”和适用场景是完全不同的。
核心区别：
键的类型：这是最根本的区别。
Object
：键必须是字符串或Symbol。如果你传入其他类型，它会尝试将其转换为字符串（比如
obj[1]
会变成
obj['1']
，
obj[{}]
会变成
obj['[object Object]']
，这常常导致键冲突）。
Map
：键可以是任何数据类型，包括对象、函数、数字、布尔值等。
Map
会严格区分这些键。迭代顺序：
Object
：在ES2015之前，对象的属性遍历顺序是不可靠的。虽然现代JS引擎对于非整数字符串键通常会保持插入顺序，但对于数字字符串键（如
'1'
,
'2'
）则会按数字大小排序。这在使用上可能会带来一些不确定性。
Map
：明确保证按照键值对的插入顺序进行迭代。这一点在需要保持数据顺序的场景下非常重要。大小获取：
Object
：没有直接获取属性数量的属性。你需要用
Object.keys(obj).length
或
Object.entries(obj).length
。
Map
：有内置的
size
属性，直接
map.size
即可获取。原型链：
Object
：有原型链。这意味着你可能会意外地访问到原型链上的属性（比如
toString
），或者需要使用
hasOwnProperty
来判断属性是否是对象自身的。
Map
：没有原型链上的属性，它是一个纯粹的键值对集合，不会有这些“干扰”。性能：对于频繁的添加、删除操作，尤其是在数据量较大时，
Map
通常比
Object
有更好的性能表现。这是因为
Map
是专门为这种用途优化的。
什么时候用Map？
你需要用非字符串作为键：比如你想把DOM元素、React组件实例、或者其他对象作为键来存储额外数据。这是
Map
最独有的优势。你需要保持键值对的插入顺序：比如处理配置项或缓存，希望按照添加的顺序进行处理。你需要频繁地添加和删除键值对：比如在算法中构建动态查找表。你需要一个真正的“字典”或“哈希表”：没有原型链的干扰，更纯粹的数据结构。
什么时候用Object？
当你需要一个简单的“记录”或“结构体”：比如表示一个用户的个人信息
{ name: 'Alice', age: 30 }
，键是固定的、可预测的字符串。你需要将数据序列化为JSON：
Object
可以直接通过
JSON.stringify
转换为JSON字符串，而
Map
则需要手动转换。你主要使用硬编码的字符串键：或者键的数量相对固定且较少。你需要在对象上定义方法：
Object
是JavaScript面向对象的基础，可以定义方法、继承等。
总结来说，如果你的需求只是一个简单的、键为字符串的静态数据集合，
Object
可能更简洁方便。但一旦涉及到动态键类型、顺序要求或高性能的增删查改，
Map
无疑是更现代、更强大的选择。
Set在数组去重和数据查找方面有哪些优势？
Set
在处理数组去重和高效数据查找方面，简直是“神来之笔”，极大地简化了代码并提升了性能。在我看来，这是它最直接、最实用的两个应用场景。
1. 数组去重：简洁与高效的完美结合
在
Set
出现之前，JavaScript数组去重通常需要一些相对繁琐的逻辑，比如：
使用
Array.prototype.filter()
结合
indexOf()
：
const arr = [1, 2, 2, 3, 4, 4, 5];const uniqueArrOld = arr.filter((item, index, self) => self.indexOf(item) === index);console.log(uniqueArrOld); // [1, 2, 3, 4, 5]
这种方法虽然能去重，但
indexOf
在每次迭代中都会遍历数组，导致时间复杂度是O(n²)，对于大型数组来说性能非常差。
使用循环和临时对象/数组：
const arr = [1, 2, 2, 3, 4, 4, 5];const uniqueArrLoop = [];const seen = {};for (const item of arr) { if (!seen[item]) { uniqueArrLoop.push(item); seen[item] = true; }}console.log(uniqueArrLoop); // [1, 2, 3, 4, 5]
这种方法性能较好（接近O(n)），但代码量相对较多，且需要一个额外的
seen
对象来辅助。
有了
Set
之后，数组去重变得异常简洁和高效：
const arr = [1, 2, 2, 3, 4, 4, 5, 'a', 'a', {id:1}, {id:1}];const uniqueArrNew = [...new Set(arr)]; // 或者 Array.from(new Set(arr))console.log(uniqueArrNew); // [1, 2, 3, 4, 5, 'a', {id:1}, {id:1}]// 注意：对象字面量 {id:1} 被视为不同的引用，所以不会被去重。// Set对于对象是基于引用地址判断唯一性的。const arrWithObjects = [{id:1, name:'A'}, {id:2, name:'B'}, {id:1, name:'A'}];// 如果想根据对象的某个属性去重，需要一些额外逻辑const uniqueObjects = Array.from(new Set(arrWithObjects.map(o => JSON.stringify(o)))) .map(s => JSON.parse(s));console.log(uniqueObjects); // [{id:1, name:'A'}, {id:2, name:'B'}]
[...new Set(arr)]
这行代码的优雅之处在于，它首先将数组转换为
Set
，
Set
会自动处理重复项，然后通过展开运算符
...
或者
Array.from()
将
Set
再转换回数组。这个过程的时间复杂度接近O(n)，效率非常高。
2. 数据查找/存在性检查：从O(n)到近似O(1)的飞跃
当你需要频繁地检查一个值是否存在于一个大型集合中时，
Set
的
has()
方法提供了巨大的性能优势。
传统数组查找：使用
Array.prototype.includes()
或
Array.prototype.indexOf()
。
const largeArray = Array.from({ length: 100000 }, (_, i) => i);console.time('Array includes');const existsInArray = largeArray.includes(99999); // O(n)console.timeEnd('Array includes'); // 耗时可能在几毫秒到几十毫秒
includes()
方法需要遍历数组，其时间复杂度是O(n)。这意味着数组越大，查找所需的时间就越长。
Set查找：使用
Set.prototype.has()
。
const largeArray = Array.from({ length: 100000 }, (_, i) => i);const largeSet = new Set(largeArray); // 首次构建Set需要O(n)console.time('Set has');const existsInSet = largeSet.has(99999); // 平均O(1)console.timeEnd('Set has'); // 耗时通常在0.x毫秒，非常快
Set
内部实现了一个哈希表（或类似的结构），使得
has()
方法的平均时间复杂度接近O(1)。这意味着无论
Set
有多大，查找一个元素所需的时间几乎是恒定的。
何时利用Set的优势？
批量去重：当你从后端获取大量数据，或者用户输入的数据中可能存在重复项，需要快速清理时。高效白名单/黑名单检查：比如在一个权限系统中，需要快速判断某个用户ID或资源ID是否在允许访问的列表中。将允许的ID放入
Set
，然后用
has()
进行检查，效率极高。避免重复处理：在一些循环或递归算法中，为了避免对同一个元素进行多次处理，可以维护一个
Set
来记录已经处理过的元素。
在我看来，
Set
和
Map
一样，都是现代JavaScript开发者工具箱中不可或缺的成员。它们不仅仅是语法糖，更是解决特定问题的优化方案。
Map和Set的弱引用版本：WeakMap和WeakSet又是什么？
当我们谈到
Map
和
Set
时，通常也会提及它们的“弱引用”版本：
WeakMap
和
WeakSet
。这俩兄弟听起来有点神秘，但它们在解决特定内存管理问题时，简直是救星。它们的核心区别在于“弱引用”这三个字。
理解“弱引用”
在JavaScript中，当一个对象被引用时，垃圾回收器（Garbage Collector, GC）就不会回收它，即使它在程序的其他地方已经不再被使用了。这叫“强引用”。如果一个对象只被“弱引用”所持有，那么当没有任何其他强引用指向它时，垃圾回收器就可以把它清理掉，从而释放内存。
WeakMap
和
WeakSet
就是利用了这种弱引用的特性。
WeakMap：弱引用的键值对集合
WeakMap
和
Map
非常相似，都是存储键值对的集合。但它有几个关键的不同点：
键必须是对象：
WeakMap
的键只能是对象（包括函数），不能是原始值（如字符串、数字、布尔值、Symbol等）。这是因为它要追踪对象的生命周期。键是弱引用：这是最重要的。
WeakMap
对键的引用是弱引用。这意味着如果一个对象只被
WeakMap
作为键引用，而没有其他地方强引用它，那么这个对象就会被垃圾回收。一旦键被回收，
WeakMap
中对应的键值对也会自动消失。不可迭代，无
size
属性：由于键可能随时被垃圾回收，
WeakMap
的大小是不确定的，因此它没有
size
属性，也不能被遍历（比如
for...of
）。你无法获取
WeakMap
中所有的键或值。方法受限：
WeakMap
只有
set()
,
get()
,
has()
,
delete()
这四个方法。没有
clear()
。
WeakMap的典型应用场景：
WeakMap
主要用于将数据“私有地”关联到对象，而不会阻止这些对象被垃圾回收。
存储对象的私有数据：如果你想为一个对象添加一些额外的数据，但又不希望这些数据成为对象本身的一部分（比如避免枚举），并且希望当这个对象不再被使用时，这些额外数据也能自动被清理，
WeakMap
是完美的选择。
const privateData = new WeakMap();class MyClass { constructor(id) { privateData.set(this, { id: id, count: 0 }); // 将私有数据与实例关联 } increment() { const data = privateData.get(this); if (data) { data.count++; console.log(`ID: ${data.id}, Count: ${data.count}`); } }}let instance = new MyClass(101);instance.increment(); // ID: 101, Count: 1instance.increment(); // ID: 101, Count: 2// 当 instance 不再被强引用时，它和 WeakMap 中对应的数据都会被垃圾回收instance = null; // 移除强引用// 此时，WeakMap中 {id: 101, count: 2} 这个数据也会被GC清理
DOM元素的元数据：给DOM元素附加一些数据，当DOM元素从文档中移除并
以上就是什么是JS的Map和Set？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518269.html
微信扫一扫 
支付宝扫一扫 
