Map与Set的高效应用技巧

JavaScript中的Map和Set虽看似简单，却是ES6赋予开发者提升代码质量的利器：Map以任意类型为键、避免命名冲突并严格保持插入顺序，完美胜任对象元数据绑定、多类型缓存等高阶场景；Set则凭借天然去重能力，让数组净化、集合运算和状态标记变得简洁高效且安全可靠——从缓存异步请求到防止重复事件监听，它们正默默优化着日常开发的每一个关键环节。

在JavaScript开发中，Map和Set是ES6引入的两种非常实用的数据结构。它们相比传统的对象和数组，在某些场景下能提供更清晰、高效和安全的解决方案。下面通过实际用例来展示它们的巧妙用法。

1. Map：键值对的灵活存储

Map允许使用任意类型作为键，而不仅仅是字符串或Symbol，这使得它在处理复杂逻辑时更加灵活。

const user = { name: 'Alice' };
const userInfo = new Map();
userInfo.set(user, { loginCount: 5, lastLogin: Date.now() });
console.log(userInfo.get(user)); // { loginCount: 5, lastLogin: ... }

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((value, key) => { ... });
for (const [key, value] of map) { ... }

2. Set：自动去重的唯一值集合

Set会自动确保其中元素的唯一性，适合用于去重和集合运算。

const arr = [1, 2, 2, 3, 4, 4, 5];
const unique = [...new Set(arr)]; // [1, 2, 3, 4, 5]

// 并集
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)))];

const processedIds = new Set();
function process(id) {
if (processedIds.has(id)) return;
// 处理逻辑
processedIds.add(id);
}

3. 实际应用场景举例

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);
}

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~