2024年前端开发：JS中filter()方法的使用(1)，百度前端面经

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

（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’,]

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-8qe3J3l5-1715484397063)]

[外链图片转存中…(img-LqjmBVWk-1715484397063)]

[外链图片转存中…(img-4KGrkCxs-1715484397064)]

[外链图片转存中…(img-Of424lrv-1715484397064)]