set对象天然适合处理标签页或权限列表等需唯一性的场景,因其自动去重且增删查接近o(1)时间复杂度;可用于管理多开标签(url唯一校验与同步)和用户权限(字符串去重或对象序列化后去重),并支持动态更新dom权限按钮。

JavaScript 中的 Set 对象天然适合处理标签页或权限列表这类需要唯一性的场景——它自动拒绝重复值,且增删查操作时间复杂度接近 O(1),比用数组 + includes() 或 filter() 去重更简洁高效。
用 Set 管理多开标签页(URL 或 ID 唯一)
浏览器中常需避免重复打开同一页面(如相同商品详情页),可用 Set 存储已打开的标签标识(如 URL、路由路径或业务 ID):
- 每次新开标签前,先检查
tabSet.has(url),存在则聚焦已有页,否则添加并打开 - 关闭标签时调用
tabSet.delete(url),自动同步状态 - 不需要手动维护索引或遍历数组,Set 内部已保证唯一性
示例:
const openedTabs = new Set();<br>// 打开前校验<br>function openTab(url) {<br> if (!openedTabs.has(url)) {<br> openedTabs.add(url);<br> window.open(url, '_blank');<br> } else {<br> console.log('该标签已存在');<br> }<br>}
用 Set 管理用户权限列表(字符串或对象键去重)
权限常以字符串数组形式下发(如 ['read', 'write', 'read']),直接转为 Set 即可去重;若权限含层级结构(如 { action: 'edit', resource: 'user' }),需序列化后存入 Set:
- 基础权限去重:
new Set(['read', 'write', 'read']) → Set(2) {'read', 'write'} - 对象权限去重:对每个对象生成唯一键(如
JSON.stringify({action, resource})),再塞进 Set - 判断是否拥有某权限:
permissionSet.has('delete')比arr.includes('delete')更快,尤其数据量大时
与 DOM 标签元素联动(动态更新权限按钮)
权限变更后,可快速同步界面:把当前所有权限存入 Set,再遍历按钮的 data-permission 属性,匹配失败即隐藏:
const userPermissions = new Set(['view', 'export']);<br>document.querySelectorAll('[data-permission]').forEach(btn => {<br> const required = btn.dataset.permission;<br> btn.style.display = userPermissions.has(required) ? 'inline-block' : 'none';<br>});
后续只需修改 userPermissions.add('edit') 或 delete,无需重刷整个列表。
注意事项和实用技巧
Set 虽好,但要注意几个细节:
- Set 不支持直接存储普通对象引用去重(
{a:1} !== {a:1}),必须用字符串键或 WeakSet(仅适用于 DOM 节点等) - 从 Set 获取数组用
[...mySet]或Array.from(mySet),别用Array.from(new Set(arr))多套一层 - 清空 Set 用
mySet.clear(),比重新赋值new Set()更节省内存 - 遍历推荐
for (const item of mySet),语义清晰且支持break
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











