当前位置：首页 > JavaScript

实现js filter

2026-04-07 00:29:55JavaScript

使用 Array.prototype.filter 方法

JavaScript 的 Array.prototype.filter 方法可以创建一个新数组，包含通过指定函数测试的所有元素。该方法不会改变原始数组。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 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, number => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

使用 reduce 方法实现 filter

Array.prototype.reduce 方法也可以用来实现类似 filter 的功能。

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

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

使用 for...of 循环实现 filter

for...of 循环提供了一种简洁的方式来遍历数组并实现过滤功能。

function forOfFilter(array, callback) {
  const result = [];
  for (const [index, element] of array.entries()) {
    if (callback(element, index, array)) {
      result.push(element);
    }
  }
  return result;
}

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

使用箭头函数简化代码

箭头函数可以让 filter 方法的回调函数更加简洁。

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

过滤对象数组

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 方法可以与其他数组方法（如 map、reduce）结合使用，实现更复杂的数据处理。

实现js filter

const numbers = [1, 2, 3, 4, 5];
const doubledEvenNumbers = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2);
console.log(doubledEvenNumbers); // 输出: [4, 8]