这里给你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 全部通用!