基于多值过滤数组所有组合的Typescript实现问题

安全阿岳

2026-8-23

实现多选属性的组合筛选

首先调整筛选逻辑核心：将单个值的匹配改成数组包含判断，同时确保选中项的默认状态为空数组（而非单个值或null）。

修改后的过滤代码

假设this.selectedFilter中每个属性都是多选后的数组（比如Color: ["Yellow","Blue","Red"]，空数组表示不筛选该属性），修改过滤逻辑如下：

this.combinations = this.combinations.filter(x => 
  // 颜色筛选：若有选中颜色，当前项Color需在选中数组内；无选中则跳过该条件
  (!this.selectedFilter.Color.length || this.selectedFilter.Color.includes(x.Color)) &&
  // 容量筛选逻辑同理
  (!this.selectedFilter.Capacity.length || this.selectedFilter.Capacity.includes(x.Capacity)) &&
  // 类型筛选逻辑同理
  (!this.selectedFilter.Type.length || this.selectedFilter.Type.includes(x.Type))
);

关键说明

选中项初始化：确保this.selectedFilter的初始值为每个属性对应空数组，避免判断出错：
```
this.selectedFilter = {
  Color: [],
  Capacity: [],
  Type: []
};
```
逻辑判断：
- 当某属性的选中数组为空（length === 0），表示不对该属性做筛选，直接返回true；
- 当选中数组有值时，检查当前项的对应属性是否存在于选中数组中，符合则返回true。