JavaScript 中手动实现数组过滤函数的完整教程

心靈之曲 2025-12-26 00:00:00 次阅读

本文详解如何不使用内置 `filter()` 方法，手写一个功能完整的数组过滤函数，重点解决回调函数返回非布尔值时的逻辑错误，并提供可复用、支持 `this` 绑定的安全实现。

在 JavaScript 中，Array.prototype.filter() 的核心逻辑是：对每个元素调用回调函数 fn(element, index, array)，只要回调返回“真值”（truthy）——而非严格等于 true ——该元素就会被保留在结果数组中。这是初学者最容易误解的关键点。

你原始代码的问题正出在这里：

if (fn(arr[i], i) === true) { ... }

该判断强制要求回调必须精确返回布尔值 true，但实际中很多合法回调会返回其他真值，例如：

n => n + 1：对 -1 返回 0（falsy），对 0 返回 1（truthy）→ ✅ 合理行为
n => n * 2：返回数字，非 true/false → ❌ 原代码会拒绝所有非 true 值，导致过滤失效

✅ 正确做法是使用隐式布尔转换（即 if (fn(...))），让 JavaScript 自动判断真值性（如 1, "hello", [], {} 均为 truthy；0, "", null, undefined, NaN, false 为 falsy）。

以下是健壮、生产就绪的手写 filter 实现：

const filter = function(arr, fn, thisArg = arr) {
  const filteredArray = [];
  for (let i = 0; i < arr.length; i++) {
    // 使用 .call() 支持自定义 this 上下文，并正确传入 element 和 index
    if (fn.call(thisArg, arr[i], i)) {
      filteredArray.push(arr[i]);
    }
  }
  return filteredArray;
};

✅ 使用示例与验证

const numbers = [-1, 0, 2, 5];

// ✅ 正确：greaterThan10 实际应为 > 10，但按题设 n > 0（即正数）
console.log(filter(numbers, n => n > 0)); 
// → [2, 5]

// ✅ 正确：plusOne 返回 n+1，其真值性取决于结果是否为 0
console.log(filter(numbers, n => n + 1)); 
// → [-1, 2, 5] （因为 -1+1=0 → falsy；0+1=1 → truthy；2+1=3 → truthy；5+1=6 → truthy）

// ✅ 正确：firstIndex 只保留索引为 0 的元素
console.log(filter(numbers, (n, i) => i === 0)); 
// → [-1]