「权限动态校验与角色缓存系统」用Set实现O(1)权限校验、Map隔离多实例状态、Map+Set组合完成角色权限交集计算，并强调WeakMap/显式清理防内存泄漏。
直接上手一个真实感强、覆盖高频痛点的综合项目：「权限动态校验与角色缓存系统」。它不堆砌 API，而是把 Map 和 Set 的核心差异、性能优势、常见陷阱全串起来，边写边踩坑边修复。
一、用 Set 做高效权限白名单校验
避免在每次按钮点击或路由守卫里反复调用 arr.includes()——这是典型的 O(n) 性能雷区。
- 把后端返回的用户权限码（如
['user:read', 'order:edit', 'admin:delete']）转成Set存入全局状态或 Vuex/Pinia store：
- 后续所有权限判断统一走
permissionSet.has('order:edit')，无论权限列表是 5 条还是 500 条，都是 O(1)； - 注意别写成
new Set(['order:edit']).has('order:edit')这种测试写法——真实场景中 Set 必须复用，否则失去意义； - 如果权限会动态增删，用
add()/delete()即可，无需重建整个结构。
二、用 Map 管理多实例组件状态映射
解决“同一个组件被多次渲染（比如多个 Tab 里的表单），状态互相污染”的问题。
- 不用
obj[tabId] = formData，因为对象键只能是字符串，且易受原型污染； - 改用
const formStateMap = new Map();，以组件实例引用（this）或唯一 symbol 为键：
formStateMap.set(tabKey, { name: '', email: '' });
- 这样每个 Tab 拥有独立状态空间，销毁时调用
formStateMap.delete(tabKey)，内存可被正常回收； - 若用普通对象，key 强制转字符串后无法区分不同实例，极易覆盖。
三、组合使用：角色-权限双向映射 + 快速查交集
当需要判断“当前用户是否同时拥有 A 角色和 B 角色的所有权限”时，单纯靠数组 filter 就很吃力。
- 先用 Map 缓存角色定义：
rolePermissionMap.set('editor', new Set(['doc:edit', 'doc:save']))； - 再用 Set 求交集逻辑（原生不支持，但几行代码就能写）：
const result = new Set();
for (const item of setA) if (setB.has(item)) result.add(item);
return result;
}
- 用户角色为
['editor', 'reviewer']，就取出两个 Set 并求交，得到共有的权限集合； - 这个过程全程基于哈希查找，比嵌套循环快一个数量级。
四、避坑重点：别让 Map/Set 成为内存泄漏源
尤其在 React/Vue 组件中，容易忽略引用生命周期。
- 不要把 DOM 节点、组件实例、大型对象直接作为 Map 键长期持有——它们不会自动释放；
- 更安全的做法是用 WeakMap 存储私有数据（如缓存计算结果），或用字符串 ID 代替对象引用；
- 在组件卸载（
useEffect cleanup或beforeUnmount）时，显式调用map.clear()或map.delete(key)； - 验证是否泄漏：打开 Chrome DevTools → Memory → 拍摄堆快照，筛选 “Map” 或 “Set”，看数量是否随操作持续增长。
