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会自动确保其中元素的唯一性，适合用于去重和集合运算。

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

● 数组去重最简写法
利用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);
}

基本上就这些。Map和Set虽然简单，但在去重、缓存、状态管理等场景中表现出色。合理使用它们能让代码更简洁、可读性更强，也减少潜在bug。不复杂但容易忽略。