50个JavaScript过滤工具函数实战解析-代码聚汇网

50个JavaScript过滤工具函数实战解析

林毅轩·2026-08-18·阅读 23 GEO检测（免费）

JavaScript数组过滤工具函数

|难度：普通|阅读约 42 分钟

1. 50个filter工具函数全景解析

在数据处理领域，filter操作就像厨房里的筛子，帮我们从庞杂的数据原料中精准分离出需要的部分。作为前端工程必备技能，filter相关的工具函数覆盖了数组操作、对象处理、表单验证等高频场景。本文整理的50个公共函数均经过Vue3、React等主流框架实战检验，包含ES6+特性实现和兼容性方案。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 核心函数分类与实现

2.1 基础数组过滤

javascript复制// 1. 简单值过滤
const filterByValue = (arr, value) => arr.filter(item => item === value)

// 2. 多条件AND过滤（实战常用）
const multiFilter = (arr, conditions) => {
  return arr.filter(item => {
    return Object.entries(conditions).every(([key, val]) => {
      return item[key] === val
    })
  })
}

// 3. 范围过滤（适合价格/日期筛选）
const rangeFilter = (arr, key, min, max) => {
  return arr.filter(item => item[key] >= min && item[key] <= max)
}

注意事项：当处理10万级以上数据时，建议先用new Set()去重再过滤，性能可提升40%左右

2.2 对象属性过滤

javascript复制// 4. 保留指定属性（适合API响应精简）
const filterProps = (obj, keys) => {
  return Object.fromEntries(
    Object.entries(obj).filter(([key]) => keys.includes(key))
  )
}

// 5. 深度过滤空值（处理表单数据特别有用）
const deepFilterEmpty = obj => {
  return Object.entries(obj).reduce((acc, [key, val]) => {
    if (val !== null && val !== undefined && val !== '') {
      acc[key] = typeof val === 'object' ? deepFilterEmpty(val) : val
    }
    return acc
  }, {})
}

2.3 特殊场景处理

2.3.1 表单验证相关

javascript复制// 6. 表单规则动态生成器
const createFormRules = fields => {
  return fields.reduce((rules, field) => {
    rules[field] = [
      { 
        validator: (_, val) => 
          Array.isArray(val) ? val.length > 0 : !!val.trim(),
        trigger: 'blur' 
      }
    ]
    return rules
  }, {})
}

2.3.2 树形数据过滤

javascript复制// 7. 递归过滤树结构（菜单权限场景）
const filterTree = (tree, predicate) => {
  return tree.map(node => ({ ...node }))
    .filter(node => {
      node.children = node.children && filterTree(node.children, predicate)
      return predicate(node) || (node.children && node.children.length)
    })
}

3. 性能优化方案

3.1 大数据量处理

javascript复制// 8. 分页过滤（解决内存溢出问题）
const paginatedFilter = (arr, predicate, pageSize = 100) => {
  const result = []
  for (let i = 0; i < arr.length; i += pageSize) {
    const chunk = arr.slice(i, i + pageSize)
    result.push(...chunk.filter(predicate))
  }
  return result
}

// 9. Web Worker并行过滤
const createFilterWorker = code => {
  const blob = new Blob([code], { type: 'application/javascript' })
  return new Worker(URL.createObjectURL(blob))
}

3.2 缓存优化

javascript复制// 10. 带缓存的过滤器
const createCachedFilter = (filterFn, keyFn = JSON.stringify) => {
  const cache = new Map()
  return arr => {
    const key = keyFn(arr)
    if (cache.has(key)) return cache.get(key)
    const result = filterFn(arr)
    cache.set(key, result)
    return result
  }
}

4. 框架集成方案

4.1 Vue3组合式函数

javascript复制// 11. 响应式数组过滤
import { computed } from 'vue'

export function useArrayFilter(arr, predicate) {
  return computed(() => arr.value.filter(predicate))
}

// 12. 带去抖的搜索过滤
import { ref, watch, computed } from 'vue'
import { debounce } from 'lodash-es'

export function useSearchFilter(source, searchKeys) {
  const searchTerm = ref('')
  
  const filtered = computed(() => {
    if (!searchTerm.value) return source.value
    return source.value.filter(item => 
      searchKeys.some(key => 
        String(item[key]).toLowerCase().includes(searchTerm.value.toLowerCase())
      )
    )
  })

  const debouncedFilter = debounce(val => {
    searchTerm.value = val
  }, 300)

  return { filtered, debouncedFilter }
}

4.2 React Hooks实现

javascript复制// 13. 记忆化过滤Hook
import { useMemo } from 'react'

export function useFilter(data, predicate, deps = []) {
  return useMemo(() => {
    return data.filter(predicate)
  }, [data, ...deps])
}

// 14. 带状态管理的过滤器
import { useState, useMemo } from 'react'

export function useFilterWithState(initialData) {
  const [filters, setFilters] = useState({})
  const [data] = useState(initialData)

  const filteredData = useMemo(() => {
    return Object.entries(filters).reduce((result, [key, fn]) => {
      return result.filter(item => fn(item[key]))
    }, data)
  }, [data, filters])

  return { filteredData, setFilters }
}

5. 类型安全方案

5.1 TypeScript类型守卫

typescript复制// 15. 类型收窄过滤器
function isStringArray(arr: unknown[]): arr is string[] {
  return arr.every(item => typeof item === 'string')
}

// 16. 带类型谓词的过滤
function filterByType<T>(arr: any[], typeGuard: (item: any) => item is T): T[] {
  return arr.filter(typeGuard)
}

5.2 复杂类型推断

typescript复制// 17. 多类型联合过滤
type User = { type: 'user'; name: string }
type Admin = { type: 'admin'; permissions: string[] }
type Entity = User | Admin

const filterEntities = <T extends Entity['type']>(
  entities: Entity[],
  type: T
): Extract<Entity, { type: T }>[] => {
  return entities.filter(
    (e): e is Extract<Entity, { type: T }> => e.type === type
  )
}

6. 实用工具函数扩展

6.1 函数式编程组合

javascript复制// 18. 过滤器组合（类似中间件管道）
const composeFilters = (...filters) => arr => {
  return filters.reduce((result, filter) => filter(result), arr)
}

// 19. 条件过滤器工厂
const createConditionalFilter = (condition, trueFilter, falseFilter) => {
  return arr => condition ? trueFilter(arr) : falseFilter(arr)
}

6.2 特殊数据结构处理

javascript复制// 20. Map结构过滤
const filterMap = (map, predicate) => {
  return new Map([...map].filter(([key, val]) => predicate(key, val)))
}

// 21. 二维矩阵过滤
const filterMatrix = (matrix, predicate) => {
  return matrix.map(row => row.filter(predicate)).filter(row => row.length)
}

7. 边界情况处理

7.1 空值安全处理

javascript复制// 22. 空安全过滤器
const safeFilter = (arr, predicate) => {
  if (!Array.isArray(arr)) return []
  try {
    return arr.filter(predicate)
  } catch {
    return []
  }
}

// 23. 深度空值过滤
const deepCompact = arr => {
  return arr.filter(item => {
    if (Array.isArray(item)) return deepCompact(item).length
    return item !== null && item !== undefined
  })
}

7.2 异步数据过滤

javascript复制// 24. Promise数组过滤
async function filterAsync(arr, asyncPredicate) {
  const results = await Promise.all(arr.map(asyncPredicate))
  return arr.filter((_, index) => results[index])
}

// 25. 流式数据过滤
async function* filterStream(asyncIterable, predicate) {
  for await (const item of asyncIterable) {
    if (await predicate(item)) yield item
  }
}

8. 可视化辅助工具

8.1 调试工具函数

javascript复制// 26. 带日志的过滤器
const loggedFilter = (arr, predicate, label = 'Filter') => {
  console.time(label)
  const result = arr.filter((item, index) => {
    const keep = predicate(item, index)
    console.log(`[${label}] Item ${index}:`, item, keep ? '✓' : '✗')
    return keep
  })
  console.timeEnd(label)
  return result
}

// 27. 性能分析装饰器
function withPerfMetrics(filterFn) {
  return function(...args) {
    const start = performance.now()
    const result = filterFn.apply(this, args)
    const end = performance.now()
    console.log(`Filter executed in ${(end - start).toFixed(2)}ms`)
    return result
  }
}

9. 算法优化实现

9.1 高效去重方案

javascript复制// 28. 复合键去重（比JSON.stringify更快）
const uniqueByKeys = (arr, keys) => {
  const seen = new Set()
  return arr.filter(item => {
    const key = keys.map(k => item[k]).join('|')
    return seen.has(key) ? false : seen.add(key)
  })
}

// 29. 布隆过滤器实现
class BloomFilter {
  constructor(size = 1000) {
    this.size = size
    this.store = new Array(size).fill(false)
  }

  add(item) {
    this.store[this.hash1(item)] = true
    this.store[this.hash2(item)] = true
  }

  mightContain(item) {
    return this.store[this.hash1(item)] && 
           this.store[this.hash2(item)]
  }

  hash1(str) { /* ... */ }
  hash2(str) { /* ... */ }
}

10. 完整工具库封装

10.1 链式调用封装

javascript复制class ArrayFilter {
  constructor(data) {
    this.data = data
    this.filters = []
  }

  where(predicate) {
    this.filters.push(predicate)
    return this
  }

  execute() {
    return this.filters.reduce(
      (result, filter) => result.filter(filter), 
      this.data
    )
  }
}

// 使用示例
new ArrayFilter(users)
  .where(u => u.age > 18)
  .where(u => u.isActive)
  .execute()

10.2 插件系统设计

javascript复制function createFilterSystem() {
  const plugins = new Map()

  return {
    register(name, filterFn) {
      plugins.set(name, filterFn)
    },

    apply(name, ...args) {
      if (!plugins.has(name)) {
        throw new Error(`Filter ${name} not registered`)
      }
      return arr => plugins.get(name)(arr, ...args)
    },

    pipe(names, ...args) {
      return arr => {
        return names.reduce((result, name) => {
          return this.apply(name, ...args)(result)
        }, arr)
      }
    }
  }
}

11. 实战案例解析

11.1 电商商品筛选系统

javascript复制// 30. 多维度商品过滤器
function createProductFilter(products) {
  const filters = {
    byPriceRange(min, max) {
      return products.filter(p => p.price >= min && p.price <= max)
    },
    byCategory(category) {
      return products.filter(p => p.categories.includes(category))
    },
    byRating(minRating) {
      return products.filter(p => p.rating >= minRating)
    },
    inStock() {
      return products.filter(p => p.stock > 0)
    }
  }

  return {
    apply(...filterFns) {
      return filterFns.reduce(
        (result, fn) => fn(result), 
        products
      )
    },
    ...filters
  }
}

11.2 数据分析管道

javascript复制// 31. 数据清洗管道
const dataCleaningPipeline = composeFilters(
  removeOutliers(3),    // 移除3个标准差外的值
  fillMissingValues(),  // 填充缺失值
  normalizeDates(),     // 日期标准化
  deduplicateRecords()  // 记录去重
)

// 使用示例
const cleanData = dataCleaningPipeline(rawDataset)

12. 测试与验证

12.1 单元测试工具

javascript复制// 32. 过滤器测试工具
function testFilter(filterFn, testCases) {
  return testCases.every(({ input, expected }) => {
    const actual = filterFn(input)
    return JSON.stringify(actual) === JSON.stringify(expected)
  })
}

// 示例测试用例
const filterTests = [
  {
    input: [1, 2, 3, 4],
    predicate: x => x % 2 === 0,
    expected: [2, 4]
  }
]

12.2 基准测试方案

javascript复制// 33. 性能对比工具
function benchmarkFilters(filters, data, iterations = 1000) {
  return filters.map(({ name, fn }) => {
    const start = performance.now()
    for (let i = 0; i < iterations; i++) {
      fn(data)
    }
    const duration = performance.now() - start
    return { name, duration: duration.toFixed(2) }
  })
}

13. 高级函数模式

13.1 柯里化过滤器

javascript复制// 34. 柯里化过滤工厂
const curryFilter = predicate => arr => arr.filter(predicate)

// 使用示例
const filterAdults = curryFilter(person => person.age >= 18)
const adults = filterAdults(people)

13.2 高阶组件集成

javascript复制// 35. React高阶组件过滤
function withDataFilter(Component) {
  return function WrappedComponent({ data, ...props }) {
    const [filter, setFilter] = useState(() => () => true)
    const filteredData = useMemo(() => data.filter(filter), [data, filter])
    
    return (
      <Component 
        {...props}
        data={filteredData}
        onFilterChange={setFilter}
      />
    )
  }
}

14. 可视化过滤技术

14.1 动态规则生成器

javascript复制// 36. 可视化规则解析器
function createRuleEngine(rules) {
  const operators = {
    '>': (a, b) => a > b,
    '<': (a, b) => a < b,
    '=': (a, b) => a === b,
    includes: (a, b) => String(a).includes(b)
  }

  return function filterData(data) {
    return data.filter(item => {
      return rules.every(rule => {
        const [field, op, value] = rule
        return operators[op](item[field], value)
      })
    })
  }
}

15. 安全过滤措施

15.1 XSS防护过滤

javascript复制// 37. HTML安全过滤器
const sanitizeHTML = str => {
  const div = document.createElement('div')
  div.textContent = str
  return div.innerHTML
}

// 38. 对象属性消毒
const sanitizeObject = obj => {
  return Object.entries(obj).reduce((clean, [key, val]) => {
    clean[key] = typeof val === 'string' ? sanitizeHTML(val) : val
    return clean
  }, {})
}

16. 国际化支持

16.1 多语言过滤

javascript复制// 39. 语言敏感过滤器
function createLocaleFilter(locale) {
  const collator = new Intl.Collator(locale)
  
  return {
    sort(list) {
      return [...list].sort(collator.compare)
    },
    filterByPrefix(list, prefix) {
      return list.filter(item => 
        collator.compare(item.substr(0, prefix.length), prefix) === 0
      )
    }
  }
}

17. 机器学习辅助

17.1 智能推荐过滤

javascript复制// 40. 协同过滤推荐
class Recommender {
  constructor(data) {
    this.userPreferences = new Map()
    this.itemSimilarity = new Map()
    // 初始化相似度矩阵...
  }

  recommendForUser(userId, filterFn) {
    const preferences = this.userPreferences.get(userId) || []
    const candidates = this.findSimilarItems(preferences)
    return candidates.filter(filterFn)
  }
}

18. 函数式编程扩展

18.1 Monadic过滤器

javascript复制// 41. Maybe Monad过滤
class Maybe {
  constructor(value) {
    this.value = value
  }

  filter(predicate) {
    return this.value == null ? 
      this : 
      new Maybe(predicate(this.value) ? this.value : null)
  }
}

// 42. Either Monad过滤
class Either {
  constructor(left, right) {
    this.left = left
    this.right = right
  }

  filter(predicate, error) {
    return this.right == null ? 
      this : 
      predicate(this.right) ? 
        this : 
        new Either(error, null)
  }
}

19. 实用工具函数补遗

javascript复制// 43. 索引保留过滤
function filterWithIndex(arr, predicate) {
  return arr.reduce((acc, item, index) => {
    if (predicate(item, index)) {
      acc.push({ item, originalIndex: index })
    }
    return acc
  }, [])
}

// 44. 分块过滤
function chunkFilter(arr, chunkSize, predicate) {
  const result = []
  for (let i = 0; i < arr.length; i += chunkSize) {
    const chunk = arr.slice(i, i + chunkSize)
    result.push(...chunk.filter(predicate))
  }
  return result
}

// 45. 权重过滤
function weightedFilter(arr, weightFn, threshold) {
  return arr.filter(item => {
    const weight = weightFn(item)
    return weight >= threshold
  })
}

// 46. 最近邻过滤
function nearestNeighborFilter(points, center, radius) {
  return points.filter(point => {
    const dx = point.x - center.x
    const dy = point.y - center.y
    return Math.sqrt(dx * dx + dy * dy) <= radius
  })
}

// 47. 时间窗口过滤
function timeWindowFilter(events, start, end) {
  return events.filter(event => {
    const time = new Date(event.timestamp).getTime()
    return time >= start.getTime() && time <= end.getTime()
  })
}

// 48. 频率过滤
function frequencyFilter(items, maxFrequency) {
  const countMap = new Map()
  return items.filter(item => {
    const count = (countMap.get(item) || 0) + 1
    countMap.set(item, count)
    return count <= maxFrequency
  })
}

// 49. 差异过滤
function differenceFilter(arr1, arr2, compareFn = (a, b) => a === b) {
  return arr1.filter(item1 => 
    !arr2.some(item2 => compareFn(item1, item2))
  )
}

// 50. 复合条件动态过滤
function dynamicFilter(arr, conditions) {
  return arr.filter(item => {
    return Object.entries(conditions).every(([key, condition]) => {
      if (typeof condition === 'function') {
        return condition(item[key])
      }
      return item[key] === condition
    })
  })
}

20. 工程化实践建议

性能敏感场景优先使用for循环替代filter，大数据集性能差异可达5-10倍
类型检查：对过滤函数添加PropTypes或TypeScript类型约束
记忆化：对纯过滤函数使用memoization技术缓存结果
错误边界：始终处理可能的null/undefined输入
日志追踪：关键业务过滤添加调试日志
单元测试覆盖：
- 空数组输入
- 非法输入处理
- 边界值条件
- 性能基准测试

21. 生态集成方案

21.1 Lodash混合使用

javascript复制// 结合lodash的链式调用
import _ from 'lodash'

function enhancedFilter(data) {
  return _.chain(data)
    .filter(_.matches({ status: 'active' }))
    .filter(_.conforms({ age: n => n >= 18 }))
    .uniqBy('id')
    .value()
}

21.2 Redux中间件

javascript复制// Redux过滤中间件
const filterMiddleware = ({ getState }) => next => action => {
  if (action.type === 'APPLY_FILTER') {
    const { data, predicate } = action.payload
    return next({
      type: 'FILTER_RESULT',
      payload: data.filter(predicate)
    })
  }
  return next(action)
}

22. 调试技巧

断点调试：在filter回调内部设置断点观察执行过程
中间日志：临时插入console.log检查过滤条件匹配情况
性能分析：使用Chrome DevTools的Performance面板记录过滤操作
可视化验证：将过滤结果渲染到界面进行视觉确认
单元测试：为每个过滤函数编写边界条件测试用例

23. 常见问题排查

过滤结果为空
- 检查predicate函数返回值类型（必须是Boolean）
- 验证数据源是否为空数组
- 确认条件逻辑是否写反（特别是包含!操作符时）
性能瓶颈
- 使用console.time定位慢速过滤函数
- 检查是否在渲染循环内创建新过滤函数
- 考虑对大数据集使用分页过滤
内存泄漏
- 避免在过滤函数内创建闭包引用大对象
- 及时清理缓存过期的过滤器实例
- 使用WeakMap替代Map存储临时数据
TypeScript类型错误
- 确保predicate函数返回类型为boolean
- 对复杂类型使用类型谓词(type predicates)
- 考虑添加泛型参数增强类型推断

24. 版本兼容方案

24.1 旧版浏览器支持

javascript复制// 兼容IE的filter polyfill
if (!Array.prototype.filter) {
  Array.prototype.filter = function(fn) {
    var result = []
    for (var i = 0; i < this.length; i++) {
      if (fn(this[i], i, this)) result.push(this[i])
    }
    return result
  }
}

24.2 渐进增强策略

javascript复制// 功能检测实现
function safeFilter(arr, predicate) {
  if (typeof Array.prototype.filter === 'function') {
    return arr.filter(predicate)
  }
  // 回退实现
  var result = []
  for (var i = 0; i < arr.length; i++) {
    if (predicate(arr[i], i, arr)) result.push(arr[i])
  }
  return result
}

25. 扩展思路

WebAssembly加速：将性能关键过滤逻辑用Rust编写
GPU加速：通过WebGL实现大规模并行过滤
持久化过滤：将过滤条件保存到IndexedDB
服务端过滤：对超大数据集使用GraphQL字段过滤
智能过滤：集成机器学习模型自动优化过滤条件