JavaScript中Map和Set数据结构的妙用_javascript技巧

Map和Set在JavaScript中提供高效数据操作。1. Map支持任意类型键、避免命名冲突并保持插入顺序，适用于对象键存储、缓存等场景；2. 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会自动确保其中元素的唯一性，适合用于去重和集合运算。

Python v2.4 中文手册 chm

Python v2.4版chm格式的中文手册，内容丰富全面，不但是一本手册，你完全可以把她作为一本Python的入门教程，教你如何使用Python解释器、流程控制、数据结构、模板、输入和输出、错误和异常、类和标准库详解等方面的知识技巧。同时后附的手册可以方便你的查询。

2

查看详情

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

以上就是JavaScript中Map和Set数据结构的妙用_javascript技巧的详细内容，更多请关注php中文网其它相关文章！