手把手教你手写 Array.prototype.forEach 方法实现
在日常的 JavaScript 开发中，array.forEach() 就像空气一样无处不在。但你是否好奇过这个简洁的遍历方法背后是如何运作的？今天，我们就来手写实现原生的 forEach 方法，彻底搞懂它的内在机制。
一、为何需要自己实现 forEach？
深入理解原理：避免成为只会调 api 的“API 工程师”
面试高频考点：手写数组方法是检验 JS 基础的重要标准
特殊场景定制：可扩展原生不支持的功能（如异步遍历）
二、手撕 forEach 源码（带详细注释）
Array.prototype.myForEach = function(callback, thisArg) {
// 1. 安全检查：必须用函数调用
if (this == null) {
throw new TypeError('Array.prototype.myForEach called on null or undefined');
}
// 2. 回调必须是函数
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
// 3. 转换类数组对象（如 arguments）
const array = Object(this);
const length = array.length >>> 0; // 确保为整数
let index = 0;
// 4. 核心遍历逻辑
while (index < length) {
// 跳过空位（保持与原生一致行为）
if (index in array) {
// 关键步骤：执行回调并绑定this
callback.call(thisArg, array[index], index, array);
}
index++;
}
};三、关键实现细节解析
稀疏数组处理：使用 index in array 检测有效索引，跳过 empty 项
安全类型转换：Object(this) 确保字符串等类数组可用
绑定执行上下文：callback.call(thisArg, ...) 动态绑定 this
长度处理技巧：length >>> 0 将非数字转为0，避免非法长度
四、实测对比原生方法
const arr = [1, 2, , 4]; // 含空位的数组
// 原生行为
arr.forEach(item => console.log(item)); // 输出: 1, 2, 4
// 我们的实现
arr.myForEach(item => console.log(item)); // 输出: 1, 2, 4 ✅五、超越原生的扩展能力
理解原理后，我们可以扩展更多实用功能：
// 支持异步回调的 forEach
Array.prototype.asyncForEach = async function(callback) {
for (let i = 0; i < this.length; i++) {
await callback(this[i], i, this);
}
};
// 带中断机制的 forEach
Array.prototype.breakableForEach = function(callback) {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this) === false) break;
}
};重要提示：生产环境务必使用原生方法，手写实现主要用于学习原理。修改内置原型（如 Array.prototype）可能引发不可预见的冲突。
六、为什么面试官爱考这个？
考察对原型链的理解：函数挂载到 Array.prototype
检验参数处理能力：类型检查、this 绑定
验证边界处理：稀疏数组、非法调用等场景
评估代码健壮性：防御式编程的实践
动手实践建议：在实现后，尝试用相同思路手写 map、filter 或 reduce 方法，你会惊讶于自己的进步速度。
理解 forEach 的底层实现，不仅能让你在面试中游刃有余，更重要的是培养透视语言特性本质的能力。下次看到数组方法时，你看到的将不再是黑盒API，而是可拆解、可定制的代码逻辑——这才是真正的高级前端工程师思维。
本文深入探讨了 forEach 的 6 大实现要点，包含 3 种扩展方案，实测代码可直接运行。掌握这些核心原理，将使你在 JavaScript 底层机制的理解上超越 90% 的开发者。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！