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')); // Alice
console.log(myMap.get(objKey)); // 这是一个对象作为键的值
console.log(myMap.has('name')); // true
console.log(myMap.size); // 4
myMap.delete(123);
console.log(myMap.size); // 3
// 遍历Map
for (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); // 3
console.log(mySet.has(5)); // true
console.log(mySet.has(2)); // false
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)]; // 快速去重
console.log(uniqueArr); // [1, 2, 3, 4, 5]
// 遍历Set
for (const value of mySet) {
console.log(value);
}
// 输出示例:
// 1
// 5
// textMap和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
对象来辅助。
DaGaoPeng(大高朋网团购程序)下载大高朋团购系统是一套Groupon模式的开源团购程序，开发的一套网团购程序，系统采用ASP+ACCESS开发的团购程序，安装超简，功能超全面，在保留大高朋团购系统版权的前提下，允许所有用户免费使用。大高朋团购系统内置多种主流在线支付接口，所有网银用户均可无障碍支付；短信发送团购券和实物团购快递发货等。 二、为什么选择大高朋团购程序系统？ 1.功能强大、细节完善 除了拥有主流团购网站功能，更特别支
有了
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: 1 instance.increment(); // ID: 101, Count: 2 // 当 instance 不再被强引用时，它和 WeakMap 中对应的数据都会被垃圾回收 instance = null; // 移除强引用 // 此时，WeakMap中 {id: 101, count: 2} 这个数据也会被GC清理 DOM元素的元数据：给DOM元素附加一些数据，当DOM元素从文档中移除并
