前言
这两天频繁处理数组,好多好多有用的用法记录一下。
上一次学习了map()有没有用到哇,今天记录并且带你们学习filter()😁😁
一、filter()是什么?
filter()也是一个常用的操作,用于把数组的某些元素的筛选,然后返回剩下的元素。和map()类似,filter()也接收一个数组。和map()不同的是,filter()把传入的数组中的集合依次筛选每个符合条件的集合,然后根据返回值是true还是false决定保留还是丢弃该元素。
二、使用
1.案例一:筛选数组中满足某条件的集合组成新数组
请求来的数据data(json):
data = [
{
id:1, name:'小馨', tel:'136****123', time:'2022-04-12', tag:'0',age:'20' },
{
id:2, name:'小航', tel:'136****456', time:'2022-04-14', tag:'1',age:'21' },
{
id:3, name:'大航', tel:'152****789', time:'2022-04-16', tag:'1',age:'22' },
{
id:4, name:'小艺', tel:'158****987', time:'2022-04-14', tag:'0',age:'21' }]
需要筛选得到已经审核通过的人名单即 tag 为 1
//已审核数组okList
this.okList = this.data.filter(item => item.tag === '1')
console.log(this.okList)
/** [{ id:2, name:'小航', tel:'136****456', time:'2022-04-14', tag:'1',age:'21' }, { id:3, name:'大航', tel:'152****456', time:'2022-04-16', tag:'1',age:'22' }] */
当然可以多加条件筛选⬇:
还是原来的data,选tag为0且年龄小于21的
//新数组newList
this.newList= this.data.filter(item =>{
return item.tag=== '0' && item.age < '21'
})
console.log(this.newList)
// [{ id:1, name:'小馨', tel:'136****123', time:'2022-04-12', tag:'0',age:'20' }]
2.案例二:巧妙的去重
请求得数据data(json):
data = ['小馨','小白','小张','小航','小馨','小航']
该处渲染发现有重复数据需要剔除
// 筛选后新数组为newData
this.newData = this.data.filter((item,index,self) => self.indexOf(item)===index)
console.log(this.newData)
// 控制台输出
// ['小馨', '小白', '小张', '小航']
总结
以上就是今天要讲的并且记录的filter(),本文仅仅简单介绍了filter()的使用,js提供了大量能使我们快速便捷地处理数据的函数和方法,还在等我去发掘😎。(细心的小伙伴可能看到上述三个方法中有两个用了ES6的新方式:箭头函数 ’ => ’ 非常的便捷,有没有发现)