前端开发中JS中filter()的使用前端培训在开发过程中，处理数组中的数据是一项比较重要的技能，尤其是对于刚入行的前端开发者来说，一定要掌握相关技能。这篇博文就是分享过滤数组中数据的操作，然后用到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))//true2.数组去重操作：对数组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（合并（数组））；//输出结果：[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;});控制台日志（新数组）；//输出结果：[1,2,3,4,5,6,7,8,9]3.保留数组中的奇数numberorevennumber(1)在数组中保留偶数：vararray=[1,2,3,4,5,6,7,8,9,10]varnewArray=array.filter((item,i,arr)=>{//函数本身返回一个布尔值，只有当返回值为真时，当前元素才会存入新数组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)=>{//函数本身返回一个布尔值，只有当返回值为真时，当前元素才会存入新数组。返回项目%2!==0;})console.log(newArr);//输出结果：[1,3,5,7,9]4.去除数组中的空字符串、undefined、null(1)去除数组中的undefinedvararray=['1','2',undefined,'3.png',undefined,'a']varnewArray=arr.filter(item=>item)console.log(newArray)(2)移除数组中的空值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=>我&&i.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的数组对象ifarray.type==="letter"thenreturnrn出去，然后用一个变量接收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;//是否根据输入匹配});});}返回这个。源数据；//最后返回想要元素的数组}原作者：三宝666
