首页 > Web开发 > 详细

js中filter过滤用法总结

时间:2019-06-09 20:47:52      阅读:766      评论:0      收藏:0      [点我收藏+]

首先回顾一下filter的作用:过滤数组中符合条件的元素

基本用法

1
2
3
let 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
13
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}]

进阶用法

数组去重(有点过时)

1
2
3
4
5
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完成,eg:

1
2
3
let arr = [1, 2, 3, 2, 3, 4]
let arrFilter = [...new Set(arr)]
console.log(arrFilter)

数组中的空字符去除

1
2
3
4
5
let arr = [‘1‘, ‘2‘, ‘3‘, ‘‘, null, undefined, ‘  ‘, ‘4‘]
let arrFilter = arr.filter((ele, index, arr) => {
return ele && ele.trim()
})
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‘]

 

js中filter过滤用法总结

原文:https://www.cnblogs.com/ltb6w/p/10994571.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!