ES5的filter方法，你真的会用吗？

关注

转载最新推荐文章于 2025-07-20 11:54:10 发布 786 阅读 AI 写同款· GEO 优化 ›

Elasticsearch Filter 查询详解本文介绍了Elasticsearch中Filter查询的核心概念与应用。Filter查询不计算相关性分数且支持缓存，适用于精确匹配、范围查询等场景，性能优于Query查询。文章详细讲解了两种主要用法：post_filter和bool中的filter子句，并针对文本字段精确匹配（如大小写问题）和null值处理等常见问题提供了解决方案。最后对比了Filter与Query的适用场景，建议精确匹配使用Filter，全文搜索使用Query，并合理利用Filter缓存提升性能。通过正确使用Filter查询，可以显著优化阅读详情

前言：2018/1/18 12:24 第一次在掘金发表文章，收获这么多赞挺意外的，感谢大家赏脸[拜谢]。因工作繁忙，本周有空会继续补充更新该文章的，喜欢的可以通过点赞或收藏跟进动态啦。再次感谢[鞠躬]~!

1/19 18:35 更新：

1.评论区老铁们说的数组去重的set的实现模式，字符串去重；
2.增加filter map搭配使用的场景引入(其实我想说的重点是这个[捂脸])；
3.滋润下文字表达，增加一些必要的注释说明；
4.排版重构

filter

1.定义

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得" callback 返回 true 或等价于 true 的值的元素"创建一个新数组。

var new_array = arr.filter(callback[, thisArg])

2.基础用法

var spread = [12, 5, 8, 130, 44]
// 筛选条件符合大于10的新数组
var filtered = spread.filter(n => n >= 10)
console.log('filtered', filtered) // => [12, 130, 44]

3.进阶用法

数组对象的键名/键值的搜索

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'ared',   'age': 24, 'active': false },
  { 'user': 'ered',   'age': 80, 'active': false },
  { 'abc': 'ered',   'age': 80, 'active': false }
]
// 筛选 age等于40或者age等于24的 数组对象
var filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter后的键名', filtered)   // => [{user: "fred", age: 40, active: false}，{user: "ared", age: 24, active: false}]

4.高阶用法

4.1 数组去重

var spread = [12, 5, 8, 8, 130, 44,130]
var filtered = spread.filter((item, idx, arr) => {
  return arr.indexOf(item) === idx;
})
// 筛选符合条件找到的第一个索引值等于当前索引值的数组
console.log('数组去重结果', filtered)

感谢评论区@缘童鞋等老铁分享想法，数组去重用ES6的set方法的实现模式

var spread = [12, 5, 8, 8, 130, 44,130]
var setFun = [...new Set(spread)]
console.log('数组去重结果', setFun)

感谢评论区@菜鸟_it_老铁分享的字符串去重，大家可以参考一下

var arr=[12, 5, 8, 8, 130, 44,130,'a','b','a']
var obj={};
arr.forEach(function(item){
obj[item]=item;
})
Object.keys(obj)
console.log(Object.keys(obj))

大家讨论对于数组去重讨论还是蛮激烈的。因此，18岁的我，建了一个供大家交流的群，对于代码的实现逻辑的优化，大家可以加文章底部下面的微信群，以后可能会组织线下活动以及程序员的单身趴吧，哈哈~~代码的世界很精彩，一起成长.

4.2 数组中的空字符串删掉

var spread = ['A', '', 'B', null, undefined, 'C', '  ']
var filtered = spread.filter((item, idx, arr) => {
  return item && item.trim()
})
console.log('数组中的空字符串删掉', filtered) // => ["A", "B", "C"]

5.一句话总结

充分利用callback返回true的特点当作"过滤条件"函数，生产新的数组

6.项目实践

filter的常用搭配

filter与map配合：用filter符合一定条件过滤后再进行map生成新的数组

在项目中，有时候我们需要在将原数组根据一定条件过滤后再进行map生成新的数据

for continue 写法

var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
var forArr = []
for (var i = 0; i < arr.length; i  ) {
    // 遇到性别为女的数组对象， 跳出本次循环
    if (arr[i].gender === 'woman') continue
    var temp = {
      name: arr[i].name
    }
    forArr.push(temp)
}
// 过滤掉性别为女的数组对象
console.log('男性名字集合', forArr) // => [{name: 'john'}, {name: 'jerry'}]

用for continue方法后，我们成功将遇到性别为女的数组对象剔除掉了，最终筛选出男性名字的数组集合。for循环如果遇到多层嵌套是比较冗杂且不易维护的。我们能不能用map代替呢？但是map不支持continue跳出循环。

问题：那又想用map减少代码量，又想用continue跳出循环，怎么办?

解决：或许用filter与map的搭配使用可以解决我们遇到的问题(可代替for continue 的使用)

代码演示： filter map 写法

var arr = [{
  gender: 'man',
  name: 'john'
}, {
  gender: 'woman',
  name: 'mark'
}, {
  gender: 'man',
  name: 'jerry'
}]
// filter : 有条件的筛选，返回条件为true的数组
// 筛选出性别为男性的名字集合
var newArr = arr.filter(n => n.gender === 'man').map(item => {
  return {
    name: item.name
  }
})
console.log('男性名字集合', newArr)   // => [{name: 'john'}, {name: 'jerry'}]