前端开发之JS中filter()的使用

Posted 2022-02-19 前端白雪

前端开发之JS中filter()的使用 

2021-12-20 11:28

前言

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

filter()方法

1、定义

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。【关注尚硅谷，轻松学IT】

2、语法

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

3、参数说明

具体参数描述，如下图所示：

返回值

返回值 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

4、用法

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

5、注意事项

（1）filter() 不会对空数组进行检测；

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

6、使用实例

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

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

eg:

var array = [14, 17, 18, 32, 33, 16, 40];

function checkItem(num)

return num >= 14;

function numFunction()

document.getElementById(“test”).innerHTML = array.filter(checkItem); //显示结果：17, 18, 32, 33, 16, 40

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

var array = [14, 17, 18, 32, 33, 16, 40];

newarr.filter(item => item.num==14); //判断数组中是否有14

console.log(newarr.filter(item => item.num==14)) //true

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

function merge(array)

return array.filter(function(item, index, arr)

//当前元素，在原始数组中的第一个索引===当前索引值，否则返回当前元素

return array.indexOf(item, 0) === index;

);

var array = [2,2,’a’,’a’,true,true,15,17];

console.log(merge(array)); // 输出结果：[2, “a”, true, 15 ,17]

数组去重的另一个实例：

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]

var newArray = array.filter(function(item, i, arr)

let a = arr.indexOf(item)

return arr.indexOf(item) === i;

);

console.log(newArray); //输出结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]

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

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

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var newArray = array.filter((item, i, arr) =>

//函数自身返回的是一个布尔值，只当返回值为true时，当前元素才会存入新的数组中。

return item % 2 === 0;

)

console.log(newArr); //输出结果：[2, 4, 6, 8, 10]

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

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var newArray = array.filter((item, i, arr) =>

//函数自身返回的是一个布尔值，只当返回值为true时，当前元素才会存入新的数组中。

return item % 2 !== 0;

)

console.log(newArr); //输出结果：[1, 3, 5, 7, 9]

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

(1)去掉数组中的undefined

var array = [\'1\',\'2\',undefined, \'3.png\',undefined, ‘a’]

var newArray = arr.filter(item => item)

console.log(newArray)

(2)去掉数组中的null

var array = [\'1\',\'2\',null, \'3.png\',null, ‘a’]

var newArray = arr.filter(item => item)

console.log(newArray)

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

var array = [\'1\', \'2\', \'\', \'3.png’, ’’, ‘a’]

var newArray = arr.filter(item => item)

console.log(newArray)

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

var array = [\'1\',\'2\',undefined, \'3.png\', ‘’, undefined, ‘a’, \' \'];

let newArray=array.filter(i=>i && i.trim()); // 注意：IE9以下的版本没有这个trim()方法

console.log(newArray); //返回结果:[\'1\',\'2\', \'3.png\', ‘a’,]

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

var arrayA = [

name:"a",type:"letter",name:”1”,type:"digital",

name:”c”,type:"letter",name:”2”,type:"digital",

];

var arrayB = arrayA.filter(function(array) //对arrayA数组对象过滤如果array.type === "letter"就return出去, 再用一个变量接收

return array.type === "letter"

);

console.log(arrayB); //输出结果：[name:"a",type:"letter",name:”c”,type:"letter",]

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

projectDetail()

if (this.value)

return this.sourcedata.filter((item) =>

return [item.ProjectName, item.ProjectNewNo].find( //通过item.ProjectName、item.ProjectNewNo来匹配是否是想要查找的元素

(si) =>

return si.indexOf(this.value) != -1; //根据是否输入来匹配

);

);

return this.sourcedata; //最后返回想要的元素的数组

原创作者：三掌柜666