JS Set实现标签管理去重与过滤：字符串标签直接用Set去重；对象标签按id/name用Map或filter+Set去重；结合Set.has()高效过滤已选/启用状态，支持多条件链式处理。
用 JS Set 实现标签管理系统的成员去重与过滤，核心在于利用 Set 的天然唯一性 + 数组转换灵活性，再结合标签的结构特征（如对象含 id 或 name）做合理映射。
用 Set 做基础去重：只处理简单标签值
如果标签是字符串（如 "react"、"vue"），直接用 Set 最简洁：
const tags = ["react", "vue", "react", "html", "vue"]; const uniqueTags = [...new Set(tags)]; // ["react", "vue", "html"]
Set 自动丢弃重复项，解构展开即可得去重后数组。适合纯标签名管理、搜索建议、筛选面板等场景。
对对象标签按字段去重（如 id 或 name）
实际系统中，标签常为对象：{ id: 1, name: "前端" }。Set 无法直接识别对象内容相等，需配合 Map 或数组 reduce 模拟“键去重”：
- 推荐方式：用
Map存id → 标签对象，自动覆盖同 id 项 - 或先提取 id 数组去重，再映射回原数据
const tagList = [
{ id: 1, name: "前端" },
{ id: 2, name: "JavaScript" },
{ id: 1, name: "FE" }, // 重复 id
{ id: 3, name: "TypeScript" }
];
// 方式一：用 Map 去重（保留最后出现的）
const uniqueByMap = [...new Map(tagList.map(t => [t.id, t])).values()];
// 方式二：用 Set 提取 id，再 filter（保留首次出现的）
const ids = new Set();
const uniqueByFilter = tagList.filter(t => {
if (ids.has(t.id)) return false;
ids.add(t.id);
return true;
});
结合过滤逻辑：动态排除/保留指定标签
在标签管理系统中，常需“排除已选标签”“只显示启用标签”等。Set 可高效支持集合运算：
- 把“已选标签 id 列表”转为 Set，
has()查询是 O(1) - 比每次
includes()遍历数组快得多，尤其数据量大时
const selectedIds = new Set([1, 3]);
const allTags = [
{ id: 1, name: "前端", enabled: true },
{ id: 2, name: "设计", enabled: true },
{ id: 3, name: "产品", enabled: false }
];
// 过滤：只留启用 & 未被选中的标签
const availableTags = allTags.filter(
t => t.enabled && !selectedIds.has(t.id)
); // → [{ id: 2, name: "设计", enabled: true }]
扩展：多条件组合过滤 + 去重一体化
例如“展示所有启用标签，且不包含黑名单关键词，同时按 name 去重”——可链式处理：
- 先
filter筛启用状态和关键词 - 再用
Map或辅助 Set 按name去重（注意大小写敏感问题） - 最后转回数组
const raw = [
{ id: 1, name: "React", enabled: true },
{ id: 2, name: "react", enabled: true },
{ id: 3, name: "Vue", enabled: false },
{ id: 4, name: "Admin", enabled: true }
];
const blacklist = new Set(["admin"]);
const nameLowerSet = new Set();
const result = raw
.filter(t => t.enabled && !blacklist.has(t.name.toLowerCase()))
.filter(t => {
const lower = t.name.toLowerCase();
if (nameLowerSet.has(lower)) return false;
nameLowerSet.add(lower);
return true;
}); // → [{ id: 1, name: "React", ... }]
