50个 filter相关的公共函数

这里给你50 个纯 JS、Vue3 通用、可直接复制使用filter 过滤工具函数 ,覆盖业务 99% 场景,包含:基础过滤、搜索、数组、对象、时间、真假值、去重、区间、正则、树形、空值、多条件等。

全部即拿即用,不依赖任何库!


50 个 Filter 过滤函数(完整版)

一、基础相等 / 不等

js 复制代码
// 1. 等于
const filterEq = (arr, k, v) => arr.filter(i => i[k] === v)

// 2. 不等于
const filterNeq = (arr, k, v) => arr.filter(i => i[k] !== v)

// 3. 全等于(严格)
const filterStrictEq = (arr, k, v) => arr.filter(i => i[k] === v)

// 4. 非严格相等
const filterLooseEq = (arr, k, v) => arr.filter(i => i[k] == v)

二、大小 / 区间

js 复制代码
// 5. 大于
const filterGt = (arr, k, n) => arr.filter(i => i[k] > n)

// 6. 大于等于
const filterGte = (arr, k, n) => arr.filter(i => i[k] >= n)

// 7. 小于
const filterLt = (arr, k, n) => arr.filter(i => i[k] < n)

// 8. 小于等于
const filterLte = (arr, k, n) => arr.filter(i => i[k] <= n)

// 9. 区间 [min, max]
const filterBetween = (arr, k, min, max) =>
  arr.filter(i => i[k] >= min && i[k] <= max)

// 10. 排除区间
const filterOutRange = (arr, k, min, max) =>
  arr.filter(i => i[k] < min || i[k] > max)

三、字符串搜索

js 复制代码
// 11. 包含字符串
const filterIncludes = (arr, k, s) =>
  arr.filter(i => (i[k] || '').includes(s))

// 12. 不包含字符串
const filterExcludes = (arr, k, s) =>
  arr.filter(i => !(i[k] || '').includes(s))

// 13. 开头匹配
const filterStartsWith = (arr, k, s) =>
  arr.filter(i => (i[k] || '').startsWith(s))

// 14. 结尾匹配
const filterEndsWith = (arr, k, s) =>
  arr.filter(i => (i[k] || '').endsWith(s))

// 15. 忽略大小写包含
const filterIncludesIgnoreCase = (arr, k, s) =>
  arr.filter(i => (i[k] || '').toLowerCase().includes(s.toLowerCase()))

// 16. 长度等于
const filterStrLenEq = (arr, k, len) =>
  arr.filter(i => (i[k] || '').length === len)

// 17. 长度大于
const filterStrLenGt = (arr, k, len) =>
  arr.filter(i => (i[k] || '').length > len)

四、数组包含关系

js 复制代码
// 18. 在数组中 in
const filterIn = (arr, k, list) =>
  arr.filter(i => list.includes(i[k]))

// 19. 不在数组中 not in
const filterNotIn = (arr, k, list) =>
  arr.filter(i => !list.includes(i[k]))

// 20. 包含子项(数组字段包含某个值)
const filterArrHas = (arr, k, val) =>
  arr.filter(i => (i[k] || []).includes(val))

// 21. 不包含子项
const filterArrNotHas = (arr, k, val) =>
  arr.filter(i => !(i[k] || []).includes(val))

// 22. 数组长度等于
const filterArrLenEq = (arr, k, len) =>
  arr.filter(i => (i[k] || []).length === len)

五、真假值 / 空值过滤

js 复制代码
// 23. 过滤真值
const filterTruthy = arr => arr.filter(Boolean)

// 24. 过滤假值
const filterFalsy = arr => arr.filter(i => !i)

// 25. 过滤非空
const filterNotNull = arr => arr.filter(i => i != null)

// 26. 过滤空字符串
const filterNotEmptyStr = arr => arr.filter(i => i !== '')

// 27. 过滤 undefined
const filterNotUndefined = arr => arr.filter(i => i !== undefined)

// 28. 过滤 null
const filterNotNullVal = arr => arr.filter(i => i !== null)

// 29. 过滤空对象 {}
const filterNotEmptyObj = arr =>
  arr.filter(i => !(i && typeof i === 'object' && Object.keys(i).length === 0))

// 30. 过滤空数组 []
const filterNotEmptyArray = arr =>
  arr.filter(i => !Array.isArray(i) || i.length > 0)

六、去重过滤

js 复制代码
// 31. 基础去重
const filterUnique = arr => arr.filter((v, i, self) => self.indexOf(v) === i)

// 32. 根据对象字段去重
const filterUniqueByKey = (arr, k) =>
  arr.filter((v, i, self) => self.findIndex(j => j[k] === v[k]) === i)

// 33. 多字段组合去重
const filterUniqueByKeys = (arr, keys) =>
  arr.filter((v, i, self) =>
    self.findIndex(j => keys.every(k => j[k] === v[k])) === i
  )

七、正则过滤

js 复制代码
// 34. 正则匹配
const filterRegExp = (arr, k, reg) =>
  arr.filter(i => reg.test(i[k] || ''))

// 35. 纯数字
const filterOnlyNumber = arr =>
  arr.filter(i => /^\d+$/.test(i))

// 36. 纯字母
const filterOnlyLetter = arr =>
  arr.filter(i => /^[a-zA-Z]+$/.test(i))

// 37. 邮箱格式
const filterEmail = arr =>
  arr.filter(i => /^.+@.+\..+$/.test(i))

// 38. 手机号
const filterPhone = arr =>
  arr.filter(i => /^1[3-9]\d{9}$/.test(i))

八、时间过滤

js 复制代码
// 39. 今天之前
const filterBeforeToday = (arr, k) =>
  arr.filter(i => new Date(i[k]) < new Date(new Date().setHours(0,0,0,0)))

// 40. 今天之后
const filterAfterToday = (arr, k) =>
  arr.filter(i => new Date(i[k]) > new Date())

// 41. 时间在区间内
const filterTimeBetween = (arr, k, start, end) =>
  arr.filter(i => new Date(i[k]) >= new Date(start) && new Date(i[k]) <= new Date(end))

九、类型过滤

js 复制代码
// 42. 只保留字符串
const filterIsString = arr => arr.filter(i => typeof i === 'string')

// 43. 只保留数字
const filterIsNumber = arr => arr.filter(i => typeof i === 'number' && !isNaN(i))

// 44. 只保留布尔
const filterIsBoolean = arr => arr.filter(i => typeof i === 'boolean')

// 45. 只保留对象
const filterIsObject = arr => arr.filter(i => typeof i === 'object' && i !== null)

十、高级组合过滤

js 复制代码
// 46. 多条件 AND 过滤
const filterAnd = (arr, conditions) =>
  arr.filter(i => Object.entries(conditions).every(([k, v]) => i[k] === v))

// 47. 多条件 OR 过滤
const filterOr = (arr, conditions) =>
  arr.filter(i => Object.entries(conditions).some(([k, v]) => i[k] === v))

// 48. 自定义函数过滤
const filterByFn = (arr, fn) => arr.filter(fn)

// 49. 过滤树形数据(递归)
const filterTree = (tree, fn) =>
  tree.filter(fn).map(i => ({ ...i, children: filterTree(i.children || [], fn) }))

// 50. 关键字全局搜索(搜索所有字段)
const filterSearchAll = (arr, keyword) =>
  arr.filter(i => Object.values(i).some(v =>
    String(v).toLowerCase().includes(keyword.toLowerCase())
  ))

🔥 直接导出成工具文件(可直接用)

新建 utils/filter.js

js 复制代码
export const {
  filterEq,filterNeq,filterStrictEq,filterLooseEq,
  filterGt,filterGte,filterLt,filterLte,filterBetween,filterOutRange,
  filterIncludes,filterExcludes,filterStartsWith,filterEndsWith,filterIncludesIgnoreCase,filterStrLenEq,filterStrLenGt,
  filterIn,filterNotIn,filterArrHas,filterArrNotHas,filterArrLenEq,
  filterTruthy,filterFalsy,filterNotNull,filterNotEmptyStr,filterNotUndefined,filterNotNullVal,filterNotEmptyObj,filterNotEmptyArray,
  filterUnique,filterUniqueByKey,filterUniqueByKeys,
  filterRegExp,filterOnlyNumber,filterOnlyLetter,filterEmail,filterPhone,
  filterBeforeToday,filterAfterToday,filterTimeBetween,
  filterIsString,filterIsNumber,filterIsBoolean,filterIsObject,
  filterAnd,filterOr,filterByFn,filterTree,filterSearchAll
} = {
  // 把上面 50 个函数全部粘贴进来
}

✅ 使用示例(Vue3 中)

js 复制代码
import { filterIncludes, filterBetween, filterSearchAll } from '@/utils/filter'

const list = [{ name: 'Vue', age: 3 }, { name: 'React', age: 5 }]

// 模糊搜索
const res1 = filterIncludes(list, 'name', 'Vue')

// 年龄区间
const res2 = filterBetween(list, 'age', 2, 4)

// 全局搜索所有字段
const res3 = filterSearchAll(list, '3')

总结

50 个 filter 函数 覆盖:

  • 相等/区间/包含/排除
  • 字符串/数组/空值/去重
  • 正则/时间/类型
  • 树形/多条件/全局搜索

Vue2 / Vue3 / React / 原生 JS 全部通用!

相关推荐
!停2 小时前
C++入门基础
java·开发语言·c++
赵文宇(温玉)2 小时前
OpenClaw3.13已经发布,该如何快速升级
java·开发语言
ん贤2 小时前
一文读懂 Go-Eino 的 Embedding
开发语言·golang·embedding
承渊政道2 小时前
C++学习之旅【智能指针的使⽤及其原理】
开发语言·c++·笔记·vscode·学习·visual studio
爆更小哇2 小时前
JMeter配置和使用入门指南
java·开发语言·测试工具·jmeter·自动化
SuperEugene2 小时前
前端基础实战:JS/TS与Vue体系化扫盲(47 篇完整目录 + 避坑)
javascript·vue.js·前端框架·npm·ecmascript·状态模式
xixixiLucky2 小时前
TreeSet |TreeMap|jar包|web包易混淆解答
java·开发语言
●VON2 小时前
2G 内存云服务器部署 Spring Boot + MySQL 实战:从踩坑到上线
服务器·开发语言·spring boot·mysql·ui·von
飞Link2 小时前
洞察数据的“分寸感”:深度解析对比学习(Contrastive Learning)
开发语言·python·学习·数据挖掘