本文详解如何不使用内置 `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）。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
以下是健壮、生产就绪的手写 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]
⚠️ 注意事项
- 不要用 === true 检查：这会错误排除所有非布尔真值（如 1, "a", []）；
- 支持 thisArg：通过 .call(thisArg, ...) 确保回调内 this 可控（如用于对象方法）；
- 保持纯函数特性：不修改原数组，始终返回新数组；
- 边界兼容：空数组、稀疏数组均能安全处理（for 循环基于 length，天然支持）。
掌握这一原理，不仅能写出正确的 filter，更能深入理解 JavaScript 的真值/假值机制与高阶函数设计思想——这是构建可靠工具函数的基石。
