鲁斯前端布鲁斯前端

文章中英模式

布鲁斯前端JS面试题目 - 实现数组 filter 方法

学习如何手动实现 JavaScript 的 Array.filter() 方法，理解高阶函数、回调函数与数组处理机制。

影片縮圖

懒得看文章？那就来看视频吧

Array.filter() 方法概述

Array.filter() 是 JavaScript 中常用的数组方法，用于创建一个新数组，其中包含所有通过特定条件测试的元素。这个方法不会改变原数组，而是返回一个新的数组。

原生 filter 方法使用方式

// 基本语法
array.filter(callback(element[, index[, array]])[, thisArg])

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

参数说明

  • 1. callback：用于测试数组每个元素的函数，返回 true 表示保留该元素
  • 2. element：当前正在处理的元素
  • 3. index（可选）：当前元素的索引
  • 4. array（可选）：调用 filter 的数组本身
  • 5. thisArg（可选）：执行 callback 时用作 this 的值

实现 Array.filter() 方法

在面试中，实现 Array.filter() 可以测试对高阶函数、回调函数和 this 绑定的理解。以下是实现步骤：

基本实现

// 基本实现
Array.prototype.myFilter = function(callback) {
  // 检查 callback 是否为函数
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  
  const result = [];
  const length = this.length;
  
  // 遍历数组
  for (let i = 0; i < length; i++) {
    // 只处理有效的索引
    if (i in this) {
      // 调用回调函数测试条件，如果返回 true 则保留该元素
      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 方法的几个实际应用：

1. 过滤对象数组

const users = [
  { id: 1, name: 'Alice', age: 25, active: true },
  { id: 2, name: 'Bob', age: 17, active: false },
  { id: 3, name: 'Charlie', age: 30, active: true },
  { id: 4, name: 'David', age: 15, active: true },
  { id: 5, name: 'Eve', age: 28, active: false }
];

// 过滤出活跃的成年用户
const activeAdults = users.myFilter(user => user.active && user.age >= 18);
console.log(activeAdults);
// [
//   { id: 1, name: 'Alice', age: 25, active: true },
//   { id: 3, name: 'Charlie', age: 30, active: true }
// ]

2. 过滤无效值

const values = [0, null, undefined, '', false, NaN, 'hello', 42];

// 过滤出真值
const truthyValues = values.myFilter(Boolean);
console.log(truthyValues); // ['hello', 42]

3. 复合条件过滤

const products = [
  { id: 1, name: 'Laptop', price: 1200, inStock: true, category: 'electronics' },
  { id: 2, name: 'Book', price: 20, inStock: true, category: 'books' },
  { id: 3, name: 'Phone', price: 800, inStock: false, category: 'electronics' },
  { id: 4, name: 'Monitor', price: 300, inStock: true, category: 'electronics' },
  { id: 5, name: 'Desk', price: 150, inStock: true, category: 'furniture' }
];

// 过滤条件：电子产品、库存有、价格小于 1000
const availableElectronics = products.myFilter(product => 
  product.category === 'electronics' && 
  product.inStock && 
  product.price < 1000
);

console.log(availableElectronics);
// [
//   { id: 4, name: 'Monitor', price: 300, inStock: true, category: 'electronics' }
// ]