前端for循环遍历2——filter使用

title: for循环——filter
date: 2025-01-14 17:09:08
tags: 遍历方法

一、filter

1.简单使用

filter中文就是叫过滤，他是里面包含一个函数或者回调函数，每次return所需值来实现的过滤。

他与map方法相似，可以携带以下三个元素。

currentValue (必选)：当前数组元素的值。

index (可选)：当前元素的索引。

array (可选)：原始数组本身。

const numbers = [1, 2, 3, 4, 5];

// 过滤出所有大于2的数字
const result = numbers.filter(function(currentValue, index, array) {
  return currentValue > 2;
});

console.log(result);  // [3, 4, 5]

2.数组对象过滤

常规使用，直接返回符合条件的数组到新数组中。

let arr = [{name:"张三",age:18},{name:"李四",age:22},{name:"王五",age:23},]
let newArr = arr.filter(function(item){
	return item.age>20
})
console.log(newArr);
//{name: '李四', age: 22}
//{name: '王五', age: 23}

常规使用，过滤掉清洗掉不含某个属性的数据。

let arr = [{name:"张三",age:18},{grade:"四年级",time:2024},{name:"王五",age:23},{name:"六麻子",age:null}]
let newArr = arr.filter(function(item){
	return item.age//只要age存在就可以被返回
})
//简写
let newArr = arr.filter(item=>item.age)//只要age存在就可以被返回
console.log(newArr);//{name: '张三', age: 18}，{name: '王五', age: 23}

3.数组去重

这个功能和indexof(a)这个函数用来寻找数组中的值是a的第一个下标。

使用filter加indexof这个两个函数来去重的原理如下：

当值第一次被遍历的下标与当前的下标相同的时候就返回，这样只有第一次出现的值才会被返回数组，达成去重的相关目的。

let arr = [0,1,2,3,1,2,3,4]
let newArr = arr.filter((item,index,self)=>{
    return self.indexOf(item) === index
})
console.log(newArr);//0,1,2,3,4

4.filer和map链式组合使用

filter与map进行链式组合，马上使用.map进行相关的属性添加

let arr = [{grade:"四年级",time:2024},{name:"王五",age:23},{name:"六麻子",age:null}]
let newArr = arr.filter(item=>item.age>20).map(item=>{
  return {...item,tag:"超过20岁的人新增属性"}
})
console.log(newArr);//{name: '王五', age: 23, tag: '超过20岁的人新增属性'}

极度省略简写版本，在map中返回的如果是一个对象，记得要添加相关的属性。

let newArr = arr.filter(item => item.age>20 ).map(item=>({...item,tag:"超过20岁的人新增属性"}))