从重复到优雅:前端筛选逻辑的优化之旅

引言:重复代码的困境

在前端开发中,数据筛选是一个高频需求。当面对类似 filterNameA、filterNameB、filterNameC 等多字段筛选时,许多开发者会本能地写出重复的条件分支。这虽然功能可行,却隐藏着维护性差、可读性低、性能隐患等问题。

本文将通过一个真实案例,展示如何通过策略模式、函数式编程和逻辑抽象,将冗余代码转化为简洁高效的解决方案。

优化前的代码

js 复制代码
// ...

for (const i in filterParams) {
  if (filterParams[i] !== undefined) {
    if (i === 'filterNameA') {
      listData = listData.filter(item =>
        filterParams[i].includes(item?.filterNameA || '')
      )
    }
    if (i === 'filterNameB') {
      listData = listData.filter(item =>
        filterParams[i].includes(item?.filterNameB || '')
      )
    }
    if (i === 'filterNameC') {
      listData = listData.filter(item =>
        filterParams[i].includes(item?.filterNameC || '')
      )
    }
    if (i === 'filterNameD') {
      listData = listData.filter(item =>
        filterParams[i].includes(item?.filterNameD || '') || item?.items?.find(child => filterParams[i].includes(child?.filterNameD || ''))
      )
    }
    if (i === 'filterNameE') {
      listData = listData.filter(item =>
        filterParams[i].includes(item?.filterNameE || '')
      )
    }
  }
}
// ...

原始代码的三大痛点

  1. 重复劳动:每个字段的 if 分支几乎相同,仅字段名不同
  2. 硬编码耦合:字段名直接写入逻辑,修改需求时必须改动核心代码
  3. 性能损耗:链式 filter 导致多次遍历数据,时间复杂度 O(n*m)

优化四部曲

  1. 策略模式解耦
js 复制代码
const fieldFilters = { fieldName: (item, value) => /* 过滤逻辑 */ }

将每个字段的过滤逻辑封装为独立函数,消除重复分支。

  1. 单次遍历优化

使用Object.entries + every组合,在一次遍历中完成所有条件判断:

js 复制代码
list.filter(item => Object.entries(filterParams).every(([key, value]) => /*...*/) )
  1. 防御性编程

空值合并运算符 ?? 统一处理 undefined/null

可选链 ?. 避免深层属性访问报错

  1. 特殊逻辑封装

对于 filterNameD 等复杂场景,独立函数保持主逻辑简洁:

js 复制代码
const childMatch = item?.items?.some(child => /*...*/)

优化后的代码

js 复制代码
/**
 * 表头筛选选项
 * @param {Array} listData 表格源数据
 * @param {Object} filterParams 已选择表头筛选项
 * @returns {Array} 筛选后的表格源数据
 */
export function filterListData(listData, filterParams) {
  if (!filterParams || !listData) {
    return listData
  }

  // 定义字段映射和过滤逻辑
  const fieldFilters = {
    filterNameA: (item, value) => value?.includes(item?.filterNameA ?? ''),
    filterNameB: (item, value) => value?.includes(item?.filterNameB ?? ''),
    filterNameC: (item, value) => value?.includes(item?.filterNameC ?? ''),
    filterNameD: (item, value) => {
      // 检查主项或子项中是否包含指定的筛选值
      const mainItemMatch = value?.includes(item?.filterNameD)
      const childItemMatch =
        item?.items?.length &&
        item.items.some(child => value?.includes(child.filterNameD))
      return mainItemMatch || childItemMatch
    },
    filterNameE: (item, value) => value?.includes(item?.filterNameE ?? ''),
  }

  return listData.filter(item => {
    // 检查所有筛选条件
    return Object.entries(filterParams).every(([key, value]) => {
      // 如果值为 undefined 或 空字符串 或 为空数组,跳过该筛选条件
      if (
        value === undefined ||
        value === null ||
        value === '' ||
        (Array.isArray(value) && value.length === 0)
      ) {
        return true
      }

      const filterFn = fieldFilters[key]
      return filterFn ? filterFn(item, value) : true
    })
  })
}

优化效果对比

指标 优化前 优化后
时间复杂度 O(n*m) O(n)
可扩展性 需修改主逻辑 仅增删映射表

延伸思考

  • 动态配置:将 fieldFilters 提取为参数,支持运行时注册新过滤规则
  • 性能监控:对大数据集添加 console.time 量化优化收益
  • 单元测试:每个过滤函数应具备独立测试用例

结语:优雅代码的哲学

最好的代码不是能运行的代码,而是像散文一样可读、像数学一样精确、像乐高一样可组合的代码。本次优化不仅减少了 80%的重复代码,更构建了一个易于维护的过滤框架------这正是前端工程化的魅力所在。

如果这篇文章帮到了你,欢迎点赞👍和关注⭐️。

文章如有错误之处,希望在评论区指正🙏🙏

相关推荐
code_YuJun22 分钟前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我23 分钟前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
Elieal36 分钟前
AJAX 知识
前端·ajax·okhttp
九皇叔叔1 小时前
Java循环结构全解析:从基础用法到性能优化
java·开发语言·性能优化
sulikey1 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烟袅1 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅2 小时前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
烛阴2 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智2 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front2 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron