【vue】Vue中的filter()用法

---

前言

这两天频繁处理数组，好多好多有用的用法记录一下。

上一次学习了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的新方式：箭头函数 ’ => ’ 非常的便捷，有没有发现）