当前位置：首页 > JavaScript

js实现filter

2026-04-06 12:23:46JavaScript

实现 JavaScript 的 `filter` 方法

在 JavaScript 中，filter 是数组的一个内置方法，用于创建一个新数组，包含通过测试函数的所有元素。以下是几种实现 filter 的方法。

使用原生 `Array.prototype.filter`

原生 filter 方法的基本用法如下：

js实现filter

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

手动实现 `filter` 方法

可以通过扩展 Array.prototype 或编写独立的函数来实现 filter 的功能。

js实现filter

方法 1：独立函数实现

function customFilter(array, callback) {
    const result = [];
    for (let i = 0; i < array.length; i++) {
        if (callback(array[i], i, array)) {
            result.push(array[i]);
        }
    }
    return result;
}

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = customFilter(numbers, num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

方法 2：扩展 Array.prototype

Array.prototype.customFilter = function(callback) {
    const result = [];
    for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            result.push(this[i]);
        }
    }
    return result;
};

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.customFilter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

实现细节说明

回调函数参数：callback 接收三个参数：当前元素、当前索引和原数组。
返回值：返回一个新数组，包含所有通过测试的元素。
不修改原数组：filter 不会修改原数组，而是返回一个新数组。

示例：过滤对象数组

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 20 }
];

const adults = users.filter(user => user.age >= 25);
console.log(adults);
// 输出: [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]

通过这些方法，可以灵活地实现 filter 功能，满足不同的需求。