竹笋

首页 » 问答 » 环境 » 前端开发之JS中filter的使用
TUhjnbcbe - 2023/10/19 17:43:00

前言

在前端开发过程中,对数组的数据进行处理也是比较常见的操作之一,而且对数组进行操作的频率远远大于对对象进行操作,因此在开发过程中对于数组里面的数据进行处理是一项比较重要的技能,尤其是对于刚入行的前端开发者来说尤为重要,所以一定要掌握好相关技能。本篇博文来分享一下关于对数组里面的数据进行筛选的操作,那么就用到了JS中filter()方法使用。

filter()方法

1、定义

filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

2、语法

array.filter(function(currentValue,index,arr),thisValue);

3、参数说明

具体参数描述,如下图所示:

返回值

4、用法

filter()方法用于把Array中的某些元素过滤掉,然后返回剩下的未被过滤掉的元素。

5、注意事项

(1)filter()不会对空数组进行检测;

(2)filter()不会改变原始数组。

6、使用实例

根据实际开发过程中的不同需求,把实战中比较常见的处理方式汇总出来,需求是做不完的,也不可能全部覆盖到,这里只分享一些比较常见的操作,方便有需要的开发者查阅使用,具体的实例如下所示。

1.返回数组array中所有元素都大于等于14的元素

eg:

vararray=[14,17,18,32,33,16,40];functioncheckItem(num){returnnum=14;}functionnumFunction(){document.getElementById(“test”).innerHTML=array.filter(checkItem);//显示结果:17,18,32,33,16,40}

判断数组里面是否存在某个值:

vararray=[14,17,18,32,33,16,40];newarr.filter(item=item.num==14);//判断数组中是否有14console.log(newarr.filter(item=item.num==14))//true

2.数组去重操作:对数组array中所有相同的元素进行去重复操作

functionmerge(array){returnarray.filter(function(item,index,arr){//当前元素,在原始数组中的第一个索引===当前索引值,否则返回当前元素returnarray.indexOf(item,0)===index;});}vararray=[2,2,’a’,’a’,true,true,15,17];console.log(merge(array));//输出结果:[2,“a”,true,15,17]

数组去重的另一个实例:

vararray=[1,2,3,4,5,6,7,8,9,4,5,6,7,9,]varnewArray=array.filter(function(item,i,arr){leta=arr.indexOf(item)returnarr.indexOf(item)===i;});console.log(newArray);//输出结果:[1,2,3,4,5,6,7,8,9]

3.数组中保留奇数或者偶数

(1)保留数组中的偶数:

vararray=[1,2,3,4,5,6,7,8,9,10]varnewArray=array.filter((item,i,arr)={//函数自身返回的是一个布尔值,只当返回值为true时,当前元素才会存入新的数组中。returnitem%2===0;})console.log(newArr);//输出结果:[2,4,6,8,10]

(2)保留数组中的奇数:

vararray=[1,2,3,4,5,6,7,8,9,10]varnewArray=array.filter((item,i,arr)={//函数自身返回的是一个布尔值,只当返回值为true时,当前元素才会存入新的数组中。returnitem%2!==0;})console.log(newArr);//输出结果:[1,3,5,7,9]

4.去掉数组中的空字符串、undefined、null

(1)去掉数组中的undefined

vararray=[1,2,undefined,3.png,undefined,‘a’]varnewArray=arr.filter(item=item)console.log(newArray)

(2)去掉数组中的null

vararray=[1,2,null,3.png,null,‘a’]varnewArray=arr.filter(item=item)console.log(newArray)

(3)去掉数组中的空字符串,但是空字符串里面不能包含空格

vararray=[1,2,,3.png’,’’,‘a’]varnewArray=arr.filter(item=item)console.log(newArray)

(4)另外一种去除空字符串的方法

vararray=[1,2,undefined,3.png,‘’,undefined,‘a’,];letnewArray=array.filter(i=ii.trim());//注意:IE9以下的版本没有这个trim()方法console.log(newArray);//返回结果:[1,2,3.png,‘a’,]

5.把对象数组a中的某个属性值取出来存到数组b中

vararrayA=[{name:"a",type:"letter"},{name:”1”,type:"digital"},{name:”c”,type:"letter"},{name:”2”,type:"digital"},];vararrayB=arrayA.filter(function(array){//对arrayA数组对象过滤如果array.type==="letter"就return出去,再用一个变量接收returnarray.type==="letter"});console.log(arrayB);//输出结果:[{name:"a",type:"letter"},{name:”c”,type:"letter"},]

6.filter()和find()结合使用,实现从数组中查找想要的元素

projectDetail(){if(this.value){returnthis.sourcedata.filter((item)={return[item.ProjectName,item.ProjectNewNo].find(//通过item.ProjectName、item.ProjectNewNo来匹配是否是想要查找的元素(si)={returnsi.indexOf(this.value)!=-1;//根据是否输入来匹配});});}returnthis.sourcedata;//最后返回想要的元素的数组}

原创作者:三掌柜

1
查看完整版本: 前端开发之JS中filter的使用