电商筛选用 Set 统一管理所有标签 ID(如 brand-apple),实现自动去重、O(1) 查找;按字段动态生成 key 判断匹配,支持交集/并集逻辑切换,提升响应速度与代码可维护性。

在电商筛选页面中,用 Set 合并多个标签过滤条件,核心是把不同维度的选中值(比如品牌、分类、属性)统一收口为一个去重、可增删、易交集/并集的集合,避免数组重复 push 和手动去重,提升响应速度和逻辑清晰度。
用 Set 统一管理所有已选标签 ID
不按“品牌数组”“价格数组”“规格数组”分开存,而是用一个 Set 存所有被用户勾选的标签唯一标识(如 brand-apple、category-phone、color-black)。这样添加、取消、清空都只需操作一个结构:
const selectedTags = new Set();
// 勾选时添加(自动去重)
selectedTags.add('brand-apple');
selectedTags.add('brand-samsung'); // 重复加也无影响
selectedTags.add('category-phone');
// 取消时删除
selectedTags.delete('brand-samsung');
// 清空
selectedTags.clear();
按业务维度提取子集做筛选匹配
后端返回的商品数据通常带结构化标签字段(如 { brand: 'apple', category: 'phone', colors: ['black', 'white'] })。前端筛选时,不再遍历多个数组,而是根据字段名动态生成对应 key,查 Set 是否包含:
-
品牌筛选:检查
selectedTags.has('brand-' + item.brand) -
分类筛选:检查
selectedTags.has('category-' + item.category) -
多值属性(如颜色):用
item.colors.some(c => selectedTags.has('color-' + c))
支持多选联动与条件组合(交集 or 并集)
用户可能希望“同时满足品牌+分类”(交集),也可能希望“品牌或颜色任一匹配”(并集)。Set 本身不直接表达逻辑关系,但可配合简单判断实现:
立即学习“Java免费学习笔记(深入)”;
-
交集模式(且):定义必选维度数组,如
['brand', 'category'],每个维度至少有一个匹配才保留商品 -
并集模式(或):只要任意一个
selectedTags.has(xxx)为真即通过 - 切换模式时,仅需改判断逻辑,
Set数据结构完全复用,无需重建或转换
与 UI 状态同步轻量高效
Checkbox 或 Tag 组件点击时,直接调用 add/delete,再触发一次 filterGoods()。因为 Set.prototype.has() 是 O(1) 查找,哪怕选了 50 个标签,每次筛选商品也几乎无性能损耗。对比用 Array.includes() 在长数组里查找,优势明显。


















