实现 Array.prototype.myFilter() 方法（手写过滤器）-js教程-PHP中文网

实现 Array.prototype.myFilter() 方法（手写过滤器）

本文详解如何不依赖原生 filter 方法，为 array 原型添加符合规范的 myfilter 方法，完整支持回调函数接收元素、索引和原数组三个参数，并正确处理布尔转换逻辑。

本文详解如何不依赖原生 filter 方法，为 array 原型添加符合规范的 myfilter 方法，完整支持回调函数接收元素、索引和原数组三个参数，并正确处理布尔转换逻辑。

在 JavaScript 中，Array.prototype.filter() 是一个高阶函数，它接收一个回调函数作为参数，并返回一个新数组，其中包含所有使回调函数返回真值（truthy）的元素。题目要求我们手动实现 myFilter 方法，且行为必须与原生 filter 完全一致——这意味着不仅功能要对，参数传递方式也必须严格匹配。

? 关键点：回调函数的三个参数

原生 filter 的回调函数签名是：

callback(element, index, array)

element：当前遍历的数组元素；
index：该元素在原数组中的索引；
array：正在被过滤的原始数组（即 this）。

因此，在 myFilter 内部调用 callback 时，必须显式传入全部三个参数：

callback(this[i], i, this)

而你最初的写法：

if (callback(this[i])) { ... } // ❌ 缺失 index 和 array 参数

会导致以下问题：

当用户回调依赖 index（如去重：array.indexOf(element) === index）或 array（如需对比其他元素）时，index 和 array 将是 undefined，逻辑失效；
测试用例 [1, 1, 2, 5, 2].myFilter((e, i, arr) => arr.indexOf(e) === i) 失败，正是因为 arr 未传入，arr.indexOf() 在 undefined 上调用报错或返回 -1，导致去重失败。

✅ 正确实现（含健壮性处理）

Array.prototype.myFilter = function(callback) {
  const newArray = [];
  // 遍历当前数组（this）
  for (let i = 0; i <blockquote><p>? 注意：Boolean(...) 显式转换并非绝对必需（因 if 语句本身会执行 ToBoolean），但加上它更清晰体现规范意图，且能避免某些边界情况（如回调返回 document.all 等稀有假值对象）——不过标准 filter 实际使用的是内部抽象操作 ToBoolean，所以 if (callback(...)) 在绝大多数场景下已等价。题解中写 Boolean(...) === true 属于冗余写法（Boolean(x) 返回 true/false，再与 true 比较无必要），推荐简化为 if (callback(this[i], i, this))。</p></blockquote><h3>? 使用示例与验证</h3><pre class="brush:php;toolbar:false;">// 奇数筛选
console.log([23, 65, 98, 5, 13].myFilter(x => x % 2)); 
// → [23, 65, 5, 13]

// 精确匹配字符串
console.log(["naomi", "quincy", "camperbot"].myFilter(el => el === "naomi")); 
// → ["naomi"]

// 去重（保留首次出现）
console.log([1, 1, 2, 5, 2].myFilter((e, i, arr) => arr.indexOf(e) === i)); 
// → [1, 2, 5]