本文详解如何在不使用原生 filter 的前提下，正确实现符合 ECMAScript 规范的 Array.prototype.myFilter 方法，重点解析回调函数三参数（元素、索引、原数组）的必要性及布尔转换逻辑。
本文详解如何在不使用原生 filter 的前提下，正确实现符合 ecmascript 规范的 `array.prototype.myfilter` 方法，重点解析回调函数三参数（元素、索引、原数组）的必要性及布尔转换逻辑。
在 JavaScript 中，Array.prototype.filter() 是一个高阶函数，它接收一个回调函数作为参数，并返回一个新数组，其中包含所有使回调函数返回“真值”（truthy）的元素。要手写等效的 myFilter 方法，关键在于严格复现其调用签名与语义行为——而不仅是功能近似。
✅ 正确实现的核心要点
-
回调函数必须传入三个参数：
filter 的规范要求回调函数被调用时，必须依次传入：- 当前元素（this[i]）
- 当前索引（i）
- 原始数组引用（this，即调用 myFilter 的数组实例）
这解释了为什么你的写法 callback(this[i]) 会失败：
[1, 1, 2, 5, 2].myFilter((element, index, array) => array.indexOf(element) === index)
该测试依赖 index 和 array 参数来去重（保留首次出现的元素）。若只传 this[i]，后两个参数将为 undefined，array.indexOf(...) 就会出错或逻辑失效。
-
结果需进行显式真值判断（推荐但非强制）
原生 filter 对回调返回值执行 ToBoolean 转换（即 Boolean(callback(...))），而非直接用 if (callback(...)) —— 虽然二者在绝大多数场景下等价，但规范明确要求“将返回值转换为布尔值后决定是否保留”。因此标准写法应为：if (Boolean(callback(this[i], i, this))) { newArray.push(this[i]); }注意：if (callback(...)) 在实践中通常可行，但为 100% 行为一致（例如处理 new Boolean(false) 等包装对象时），建议显式调用 Boolean()。
✅ 完整、健壮的实现代码
Array.prototype.myFilter = function(callback) {
// 类型校验：确保 callback 是函数
if (typeof callback !== 'function') {
throw new TypeError(`${callback} is not a function`);
}
const newArray = [];
for (let i = 0; i <h3>⚠️ 注意事项与常见误区</h3>
- ❌ 不要省略 i（索引）和 this（原数组）：它们是 filter 回调的正式参数，缺失将导致依赖这些参数的逻辑（如去重、上下文感知过滤）失败。
- ❌ 不要直接修改 this 或使用 for...in：this 是类数组对象，应使用标准 for 循环遍历 length，确保稀疏数组和非数字键的安全处理。
- ✅ 支持稀疏数组：this[i] 在索引不存在时返回 undefined，callback(undefined, i, this) 仍会被调用，符合原生行为。
- ✅ 自动继承：挂载到 Array.prototype 后，所有数组实例（包括字面量 [1,2,3]）均可直接调用 .myFilter()。
✅ 验证示例
console.log([23, 65, 98, 5, 13].myFilter(x => x % 2)); // → [23, 65, 5, 13] console.log(["naomi", "quincy", "camperbot"].myFilter(x => x === "naomi")); // → ["naomi"] console.log([1, 1, 2, 5, 2].myFilter((el, idx, arr) => arr.indexOf(el) === idx)); // → [1, 2, 5] （去重，保留首次出现位置）
通过精准传递三参数并遵循布尔转换规则，你的 myFilter 就能完全替代原生 filter，成为真正可信赖的原型扩展。
