2024年前端开发：JS中filter()方法的使用，2024年最新2024大厂Web前端社招面试题

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

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

  

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)另外一种去除空字符串的方法

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

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

和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

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

[外链图片转存中…(img-DZt2yDjf-1715484433247)]

[外链图片转存中…(img-EVyHxBoj-1715484433248)]