当前位置：首页 > JavaScript

js实现filter

2026-03-14 18:36:24JavaScript

实现 JavaScript 的 `filter` 方法

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

原生 `filter` 方法的使用

原生 filter 方法接受一个回调函数，该函数会对数组的每个元素进行测试。回调函数返回 true 的元素会被包含在新数组中。

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]

扩展 `Array.prototype` 实现

可以通过扩展 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]

使用 `reduce` 实现 `filter`

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

js实现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]