2023年12月27日发(作者：)

filter函数的用法 js

Filter数是JavaScript大的API之一，它能够从一组数组中过滤掉不符合要求的元素，并在返回新数组中保留符合要求的元素。Filter数是 ES5准中添加的一个新函数，可以帮助我们快速过滤和查找数组中的元素，节省了开发时间。

一、Filter数的基本用法

Filter数的基本用法是将一个函数作为参数传入，函数的参数包含当前循环的元素和索引，返回值可以是 true者 false，true示保留当前元素，false示忽略当前元素，最终返回一个新的数组：

(callback(element, index, array),

[thisArg])

实例：

var array = [1, 2, 3, 4];

//数组中元素大于2的元素过滤出来

var result = (function(element, index, array)

{

return element > 2;

});

(result); // [3, 4]

二、Filter数的应用

1.滤出数组中的偶数

Filter数可以用来过滤出数组中的偶数：

- 1 -

var array = [1, 2, 3, 4, 5, 6];

var result = (function(element, index, array)

{

return element % 2 === 0;

});

(result); // [2, 4, 6]

2.据对象属性过滤数组中的元素

我们可以将对象作为数组中的元素，使用 Filter数过滤出数组中符合条件的对象：

var array = [

{na John age: 18},

{na Jack age: 20},

{na Mike age: 22},

];

var result = (function(element, index, array)

{

return > 20;

});

(result);

// [{na Mike age: 22}]

3.找数组中是否有某个元素

使用 Filter数可以快速查找数组中是否有某个元素：

- 2 -

var array = [1, 2, 3, 4, 5, 6];

var result = (function(element, index, array)

{

return element === 3;

});

(result); // [3]

三、Filter数的局限

Filter数的局限在于只能处理一维数组，如果要处理多维数组，就可以使用 ES6 map数来实现：

(callback(currentValue, index, array),

[thisArg])

实例：

var array = [

[1, 2],

[3, 4],

[5, 6],

];

var result = (function(element, index, array) {

return (function(el, index, array) {

return el > 3;

});

});

- 3 -

(result); // [[], [4], [5, 6]]

四、Filter数的性能优化

Filter数的性能表现会根据我们的调用来定，可以采取一些有效的优化措施，比如在 callback数中 return 一个常量，而不是执行复杂的计算，避免 callback数中嵌套数组的操作，或者使用 ES6箭头函数：

var array = [1, 2, 3, 4, 5, 6];

var result = ((element, index, array) =>

element > 3);

(result); // [4, 5, 6]

总结

Filter数是一个强大的 API，可以帮助我们快速过滤和查找数组中的元素，提升开发效率。Filter数的基本用法是将一个函数作为参数传入，其中 callback数的返回值可以是 true者 false，true示保留当前元素，false示忽略当前元素，最终返回一个新的数组。同时， Filter数也有一定的局限，只能处理一维数组，要处理多维数组，还需使用 map数。此外，为了提高 Filter数的性能，我们可以优化 callback数，比如 return 一个常量，避免 callback数中嵌套数组的操作，或者使用 ES6箭头函数。

- 4 -