前端开发之 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:

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); //判断数组中是否有 14console.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

​