Map和Set在JavaScript中提供高效数据操作。1. Map支持任意类型键、避免命名冲突并保持插入顺序，适用于对象键存储、缓存等场景；2. Set自动去重，可用于数组去重、集合运算及状态标记；实际应用如缓存异步请求、去重事件监听器，提升代码安全性与可读性。
在JavaScript开发中，Map和Set是ES6引入的两种非常实用的数据结构。它们相比传统的对象和数组，在某些场景下能提供更清晰、高效和安全的解决方案。下面通过实际用例来展示它们的巧妙用法。
1. Map：键值对的灵活存储
Map允许使用任意类型作为键，而不仅仅是字符串或Symbol，这使得它在处理复杂逻辑时更加灵活。
● 使用对象作为键当需要将某些元数据与特定对象关联时，Map可以避免修改原对象：
const user = { name: 'Alice' };
const userInfo = new Map();
userInfo.set(user, { loginCount: 5, lastLogin: Date.now() });
console.log(userInfo.get(user)); // { loginCount: 5, lastLogin: ... }
传统对象的所有键都是字符串，容易发生命名冲突。Map则不会：
const cache = new Map();
cache.set('1', 'number one');
cache.set(1, 'string one');
console.log(cache.get('1')); // 'number one'
console.log(cache.get(1)); // 'string one'
Map保留插入顺序，且提供forEach和迭代器接口，便于操作：
map.forEach((value, key) => { ... });
for (const [key, value] of map) { ... }
2. Set：自动去重的唯一值集合
Set会自动确保其中元素的唯一性，适合用于去重和集合运算。
● 数组去重最简写法
利用Set快速清除重复项：
const arr = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(arr)]; // [1, 2, 3, 4, 5]
结合展开运算符和Array方法，轻松进行集合操作：
// 并集
const union = [...new Set([...a, ...b])];
// 交集
const intersect = [...new Set(a.filter(x => new Set(b).has(x)))];
// 差集（a中有，b中没有）
const difference = [...new Set(a.filter(x => !new Set(b).has(x)))];
当需要记录某些状态是否已处理时，Set比数组更高效：
const processedIds = new Set();
function process(id) {
if (processedIds.has(id)) return;
// 处理逻辑
processedIds.add(id);
}
3. 实际应用场景举例
● 缓存异步请求结果使用Map以参数为键缓存函数调用结果（记忆化）：
const cache = new Map();
async function fetchData(url) {
if (cache.has(url)) return cache.get(url);
const result = await fetch(url).then(r => r.json());
cache.set(url, result);
return result;
}
防止重复绑定事件：
const handlers = new Set();
function addHandler(fn) {
if (handlers.has(fn)) return;
element.addEventListener('click', fn);
handlers.add(fn);
}
