用 Set 管理标签筛选状态，自动去重且增删查均为 O(1)；初始化 const selectedTags = new Set()，通过 toggleTag 切换选中，Array.from(selectedTags) 渲染，filterItems 结合 has 实现高效并集筛选。
用 Set 管理标签筛选的选中状态，天然适合去重——它自动忽略重复值，且增删查操作都是 O(1) 时间复杂度，比数组去重更简洁高效。
初始化一个 Set 存储已选标签
不要用数组模拟“选中列表”，直接创建 Set 实例：
const selectedTags = new Set();
Set 不会存储重复项，比如连续添加两次 "react"，它内部仍只保留一个。
点击标签时切换选中状态（添加或删除）
每次点击标签，检查是否已存在，存在就删，不存在就加：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
function toggleTag(tag) {
if (selectedTags.has(tag)) {
selectedTags.delete(tag);
} else {
selectedTags.add(tag);
}
}
- 避免手动写
indexOf+splice或filter，逻辑更清晰 - 不需要额外判断重复，Set 自动保障唯一性
- 调用示例：
toggleTag("vue")、toggleTag("javascript")
同步 UI：渲染当前选中的标签列表
把 Set 转成数组再遍历渲染（例如 React 中的 JSX 或原生 DOM 操作）：
// 获取当前所有选中标签（顺序按插入顺序）
const currentTags = Array.from(selectedTags);
// 原生示例：更新页面上的标签容器
tagListElement.innerHTML = currentTags
.map(tag => `<span class="tag">${tag}</span>`)
.join('');
注意：Set 遍历顺序是插入顺序，和数组一致，无需额外排序，除非业务需要固定顺序（如按字母排序，可对 Array.from 结果调用 .sort()）。
配合筛选逻辑：过滤数据项
假设有文章列表，每篇文章有 tags: string[]，只需判断其任意标签是否在选中的 Set 中：
function filterItems(items) {
if (selectedTags.size === 0) return items; // 未选任何标签，显示全部
return items.filter(item =>
item.tags.some(tag => selectedTags.has(tag))
);
}
- 用
selectedTags.has(tag)替代selectedArray.includes(tag)，性能更好 - 支持多标签“并集筛选”（满足任一即显示），如选了 "react" 和 "typescript"，则带任一标签的文章都保留
- 若需“交集筛选”（必须同时包含所有选中标签），改用
Array.from(selectedTags).every(...)
