当前位置：首页 > JavaScript

实现js filter

2026-02-02 07:10:25JavaScript

实现 JavaScript 的 `filter` 方法

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

使用原生 `Array.prototype.filter`

原生 filter 方法是最简单的实现方式，接受一个回调函数作为参数：

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

手动实现 `filter` 方法

可以手动实现一个 filter 函数，模拟原生行为：

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]

使用 `reduce` 实现 `filter`

reduce 也可以用来实现 filter 的功能：

function filterWithReduce(array, callback) {
  return array.reduce((acc, current, index, arr) => {
    if (callback(current, index, arr)) {
      acc.push(current);
    }
    return acc;
  }, []);
}

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

为数组原型添加自定义 `filter` 方法

可以为 Array.prototype 添加自定义的 filter 方法（不推荐修改原生原型，仅作演示）：

Array.prototype.myFilter = 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.myFilter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

使用生成器实现惰性 `filter`

生成器可以实现惰性求值的 filter，适用于大数据集：

function* lazyFilter(array, callback) {
  for (const item of array) {
    if (callback(item)) {
      yield item;
    }
  }
}

const numbers = [1, 2, 3, 4, 5];
const filtered = lazyFilter(numbers, num => num % 2 === 0);
console.log([...filtered]); // [2, 4]