如何优化多参数数组排序过滤函数？以游戏目录场景为例

核心思路 #

拆分过滤逻辑与排序逻辑，将单个过滤条件封装为独立判断规则，通过组合规则实现多条件同时生效，彻底替代冗余的if分支。

具体实现步骤 #

1. 封装独立的过滤规则

把每个参数对应的过滤逻辑写成纯函数，每个函数只负责单一判断：

// 按游戏类型过滤（传入'all'则不限制）
const filterByGenre = (game, targetGenre) => targetGenre === 'all' || game.genre === targetGenre;
// 按儿童友好属性过滤（仅当开启该条件时生效）
const filterByChildFriendly = (game, isEnabled) => !isEnabled || game.isChildFriendly;
// 按本地多人模式过滤（仅当开启该条件时生效）
const filterByLocalMultiplayer = (game, isEnabled) => !isEnabled || game.localMultiplayer;
// 按搜索关键词模糊匹配过滤
const filterByQuery = (game, keyword) => keyword.trim() === '' || game.name.toLowerCase().includes(keyword.toLowerCase());

2. 组合过滤条件实现多维度筛选

在计算属性中，将所有需要生效的过滤规则收集为数组，通过Array.prototype.filter结合every方法，一次性完成多条件叠加过滤：

computed: {
  showPS5Games() {
    // 克隆原始数组，避免修改源数据
    let result = [...this.ps5Games];

    // 收集所有需要应用的过滤规则
    const activeFilters = [
      game => filterByGenre(game, this.genre),
      game => filterByChildFriendly(game, this.isChild),
      game => filterByLocalMultiplayer(game, this.isLocalMultiplayer),
      game => filterByQuery(game, this.query)
    ];

    // 应用所有过滤条件：只有满足所有规则的游戏才会被保留
    result = result.filter(game => activeFilters.every(filter => filter(game)));

    // 调用独立的排序方法处理排序
    return this.applySort(result, this.selectedSort);
  }
}

3. 独立封装排序逻辑

把排序规则抽成单独方法，用映射表替代if分支，便于后续扩展：

methods: {
  applySort(games, sortType) {
    // 排序规则映射表，key对应selectedSort的可选值
    const sortRules = {
      'name-asc': (a, b) => a.name.localeCompare(b.name),
      'name-desc': (a, b) => b.name.localeCompare(a.name),
      'rating-asc': (a, b) => a.rating - b.rating,
      'rating-desc': (a, b) => b.rating - a.rating
    };

    // 存在对应排序规则则执行排序，否则返回原数组
    return sortRules[sortType] ? [...games].sort(sortRules[sortType]) : games;
  }
}

优化后的优势 #

• 解决复选框组合失效问题：通过every同时校验所有开启的过滤条件，真正实现多条件叠加筛选
• 消除冗余if分支：新增过滤/排序规则只需添加对应函数或映射项，无需修改核心逻辑
• 代码可读性与维护性提升：逻辑拆分清晰，每个模块只负责单一职责
• 扩展性强：后续新增平台、过滤参数或排序规则，只需小幅度修改即可适配

内容的提问来源于stack exchange，提问作者Mgnvr