js筛选filter()

filter()可以进行条件筛选、去重、过滤掉空字符串等方法。

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。

返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

简单讲filter就是一个数组过滤器,参数接收一个函数,数组的每一项经过函数过滤,返回一个符合过滤条件的新数组

函数接收三个参数:

item (当前遍历的数组项)
i (当前项索引)
arr (调用filter函数的数组本身)

  //需求找到数组内偶数
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let newArr = arr.filter((item, i, arr) => {
//函数本身返回布尔值,只有当返回值为true时,当前项存入新数组。
return item % 2 == 0
})
console.log(newArr)

去重:

//filter结合indexof实现去重
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7]

let newArr = arr1.filter(function(item, i, arr) {
//当前元素,在原始数组中的第一个索引 == 当前索引值,当前项则存入新数组,
//否则当前项**不**存入新数组,进行下一次循环
return arr.indexOf(item) === i;
});

console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8]

数组中空字符串去除:

let arr = ['1', '2', '3', '', null, undefined, '  ', '4']
let arrFilter = arr.filter((ele, index, arr) => {
return ele && ele.trim()
})
console.log(arrFIlter)

其它示例:

//结合map使用可以先过滤出符合条件的对象然后去除某些不需要的字段
// 需求: 年龄大于18的姓名
let arrObj = [{
name: 'aa', age: 13
}, {
name: 'bb', age: 23
}, {
name: 'cc', age: 18
}, {
name: 'dd', age: 11
}, {
name: 'ee', age: 28
}]
let arrObjFilter = arrObj.filter(ele => ele.age > 18).map(ele => {
return ele.name
})
console.log(arrObjFilter) // ['bb', 'ee']
js中的map()

map()和filter()看似相似,都能接受一个回调函数作用于调用者。并且都不会对原数据有影响。

a = [1,2,3,4,5]
b = a.map(item=>item+2)
c = a.filter(item=>item+2)
// b=[3,4,5,6,7]
// c=[3,4,5,6,7]

区别:

当函数的回调是一个布尔值时就不同了。

a = [1,2,3,4,5]
b = a.map(item=>item>2)
c = a.filter(item=>item>2)
// b= [false, false, true, true, true]
// c= [3, 4, 5]

总结:map返回的内容有可能是执行的结果而filter则是调用数组本身或子集。