ES5的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'}]

用filter +map 写法方法后，我们简简单单用两三行代码就实现出了用for + continue写法的功能。既优雅又易读易维护，何乐而不为呢？

that's all, 以上就是我的个人的经验总结，如果对你的开发有帮助，欢迎点赞，如果觉得哪里出错了，欢迎指出，大家一起进步，共同成长~。~

一起交流?

如果你有其它更好的想法想一起交流，请订阅微信公众号yhzg_gz(点击复制，在微信中添加公众号粘贴即可)与我联系，追求代码质量，高效率编程是我们共同的目标。

付出的前端路