【js学习】js中filter过滤⽤法总结定义和⽤法
filter() ⽅法创建⼀个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进⾏检测。
注意： filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
参数说明
参数描述
function(currentValue, index,arr)必须。函数，数组中的每个元素都会执⾏这个函数函数参数:
参数描述currentValue必须。当前元素的值
index可选。当期元素的索引值
arr可选。当期元素属于的数组对象
thisValue可选。对象作为该执⾏回调时使⽤，传递给函数，⽤作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"
⾸先回顾⼀下filter的作⽤：过滤数组中符合条件的元素
基本⽤法
1 2 3let arr = [1, 3, 5, 8]
let arrFilter = arr.filter(ele => ele > 4) console.log(arrFilter) // [5, 8]
另外也可以⽤来过滤对象数组中符合条件的对象，eg：
1 2 3 4 5 6 7 8 9 10 11 12 13let 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}]
进阶⽤法
数组去重（有点过时）
1 2 3 4 5let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = arr.filter((ele, index, arr) => {  return arr.indexOf(ele) === index
})
console.log(arrFIlter)
⽬前⽐较常⽤的⽅法是使⽤ES6的set完成，eg：
1 2let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = [...new Set(arr)]
2 3let arrFilter = [...new Set(arr)] console.log(arrFilter)
数组中的空字符去除
1 2 3 4 5let arr = ['1', '2', '3', '', null, undefined, '  ', '4'] let arrFilter = arr.filter((ele, index, arr) => {  return ele && im()
})
javascript高级语法console.log(arrFIlter)
⾼级⽤法
结合map使⽤可以先过滤出符合条件的对象然后去除某些不需要的字段,⽐如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16// 需求: 年龄⼤于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]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。