定义和方法: filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素 注意:filter()不会对空数组进行检测 注意:filter()不会改变原始数组 基本用法:
let arr = [1,3,5,8]
let arrFilter = arr.filter(ele => ele > 4)
console.log(arrFilter) // [5,8]
另外也可以用来过滤对象数组中符合条件的对象
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)
console.log(arrObjFilter) // [{name: 'bb', age: 23}, {name: 'ee', age: 28}]
进阶用法
数组去重(有点过时)
let arr = [1,2,3,2,3,4]
let arrFilter = arr.filter((ele, index, arr) => {
return arr.indexOf(ele) === index
})
console.log(arrFilter)
目前比较常见的方法是使用ES6的set完成
let arr = [1,2,3,2,3,4]
let arrFilter = [...new Set(arr)]
console.log(arrFilter)
数组中的空字符串去除
let arr = ['1','2','3','',null, ' ', '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']
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实现去重 indexOf在js中有着很重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,如果存在返回该元素或字符第一次出现的位置的索引,不存在则返回-1
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 2, 3, 4, 5, 6, 7]
let newArr = arr1.filter(function(item, i, self) {
let a = self.indexOf(item)
console.log(`item----${item},self.indexOf(item)---${a},i----${i}`)
return self.indexOf(item) === i;
});
console.log(newArr) //[1, 2, 3, 4, 5, 6, 7, 8]
