深入探究filter函数的用法

小蓝 • 2024-12-10 18:17 • 编程

一、filter函数的基本用法

filter函数是数组对象中的一个方法，可以过滤出满足某个条件的元素并返回一个新的数组。

语法：array.filter(function(currentValue,index,arr), thisValue)

第一个参数：回调函数，必须。规定数组中每个元素执行的函数，该函数返回true或false，true表示该元素通过过滤。

第二个参数：可选，传递给函数的值被视为”this”的值。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(item) {
    return item % 2 === 0;
});
console.log(newArr); // [2,4]

二、filter函数与map函数的区别

filter函数与map函数类似，但是两者有本质的区别：

map函数返回的是一个新的数组，该数组的元素为回调函数的返回值。

filter函数返回的是一个新的数组，该数组只包含通过回调函数测试的元素。

let arr = [1 ,2, 3, 4, 5];
let newArr1 = arr.map(function(item) {
    return item * 2;
});
console.log(newArr1); // [2, 4, 6, 8, 10]
let newArr2 = arr.filter(function(item) {
    return item % 2 === 0;
});
console.log(newArr2); // [2, 4]

三、使用箭头函数简化代码

在ES6中，可以使用箭头函数更快捷地编写filter函数。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item % 2 === 0);
console.log(newArr); // [2, 4]

四、filter函数实现去重

可以使用filter函数实现数组去重，如下：

let arr = [1, 1, 2, 2, 3, 4, 5, 5];
let newArr = arr.filter(function(item, index, arr) {
    return arr.indexOf(item) === index;
});
console.log(newArr); // [1, 2, 3, 4, 5]

五、filter函数组合使用

filter函数可以和其他高阶函数组合使用，如下：

1)使用filter函数和map函数实现一个数组中所有偶数元素的平方：

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item % 2 === 0).map(item => item * item);
console.log(newArr); // [4, 16]

2)使用filter函数和reduce函数实现数组中4的倍数的和：

let arr = [1, 2, 3, 4, 5];
let sum = arr.filter(item => item % 4 === 0).reduce((x, y) => x + y);
console.log(sum); // 4

六、filter函数在异步操作中的应用

在异步操作中，可以使用filter函数过滤出符合条件的异步操作，例如：禁止用户重复点击按钮的例子。

let btn = document.querySelector('#btn');
let flag = true;

btn.addEventListener('click', function() {
    if(flag) {
        flag = false;
        fetchData().then(function(data) {
            doSomething(data);
            flag = true;
        });
    }
});

function fetchData() {
    return new Promise(function(resolve, reject) {
        // 构造异步操作，返回结果为data
        resolve(data);
    });
}

function doSomething(data) {
    let result = data.filter(item => item % 2 === 0)
                     .map(item => item * item);
    // 执行某个操作
}

七、小结

本文详细介绍了filter函数的基本用法以及其与map函数、箭头函数、reduce函数的组合使用等。

同时，我们也了解到了filter函数在异步操作中的应用，可以有效地避免用户重复点击按钮等问题。

filter函数是JavaScript中一个非常实用的函数，可以让我们更好地操作数组，并提高开发效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/230288.html