当前位置：首页 > JavaScript

js 实现filter

2026-02-01 12:36:12JavaScript

实现数组的 filter 方法

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

原生方法的使用

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

自定义实现

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 oddNumbers = numbers.myFilter(num => num % 2 !== 0);
console.log(oddNumbers); // 输出: [1, 3, 5]

使用 reduce 实现

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

const numbers = [10, 20, 30, 40];
const filtered = numbers.filterWithReduce(num => num > 25);
console.log(filtered); // 输出: [30, 40]

处理稀疏数组的实现

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

const sparseArray = [1, , 3, , 5];
const filteredSparse = sparseArray.sparseFilter(num => num % 2 === 1);
console.log(filteredSparse); // 输出: [1, 3, 5]

异步过滤实现

Array.prototype.asyncFilter = async function(callback) {
  const results = await Promise.all(this.map(callback));
  return this.filter((_, index) => results[index]);
};

const asyncNumbers = [1, 2, 3, 4];
asyncNumbers.asyncFilter(async num => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return num % 2 === 0;
}).then(filtered => console.log(filtered)); // 输出: [2, 4]

这些实现展示了 filter 方法的不同变体，包括基本实现、使用 reduce 的方法、处理稀疏数组以及异步过滤。每种方法都有其适用的场景，可以根据具体需求选择最合适的实现方式。

js 实现filter