JavaScript 中怎么使用 Set 实现标签筛选功能的去重管理-js教程-PHP中文网

用 set 管理标签筛选状态，自动去重且增删查均为 o(1)；初始化 const selectedtags = new set()，通过 toggletag 切换选中，array.from(selectedtags) 渲染，filteritems 结合 has 实现高效并集筛选。

javascript 中怎么使用 set 实现标签筛选功能的去重管理

用 Set 管理标签筛选的选中状态，天然适合去重——它自动忽略重复值，且增删查操作都是 O(1) 时间复杂度，比数组去重更简洁高效。

初始化一个 Set 存储已选标签

不要用数组模拟“选中列表”，直接创建 Set 实例：

const selectedTags = new Set();

Set 不会存储重复项，比如连续添加两次 "react"，它内部仍只保留一个。

点击标签时切换选中状态（添加或删除）

每次点击标签，检查是否已存在，存在就删，不存在就加：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

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