JavaScript 手写实现 `forEach` 方法

forEach 是 JavaScript 中常用的数组方法，用于对数组中的每个元素执行一个指定的操作。要实现 forEach，需要理解以下几个概念和步骤：

1. 定义 forEach 方法:

   • forEach 方法接收一个回调函数作为参数。
   • 回调函数会在每个数组元素上执行，接收当前元素、索引以及整个数组作为参数。

2. 遍历数组:

   • 通过循环访问数组中的每一个元素。
   • 调用回调函数，并将当前元素、当前索引和数组本身作为参数传递给回调函数。

3. 实现代码:

   • 在实现 forEach 时，需要处理边界情况，比如空数组和回调函数是否为有效函数。

以下是一个简化的 forEach 实现示例，逐步解释每个步骤：

forEach 方法的实现步骤

Array.prototype.myForEach = function(callback, thisArg) {
  // 1. 验证回调函数是否是一个函数
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }

  // 2. 获取当前数组
  const array = this;
  
  // 3. 获取数组长度
  const length = array.length;
  
  // 4. 遍历数组
  for (let i = 0; i < length; i++) {
    // 5. 获取当前元素
    const element = array[i];
    
    // 6. 调用回调函数
    // thisArg 为 undefined 时，回调函数的 this 指向全局对象或严格模式下是 undefined
    // 否则 this 指向 thisArg
    callback.call(thisArg, element, i, array);
  }
};

代码详细解释

1. 验证回调函数：

   if (typeof callback !== 'function') {
     throw new TypeError(callback + ' is not a function');
   }
   

   确保传入的 callback 是一个函数，如果不是，则抛出 TypeError 异常。

2. 获取当前数组：

   const array = this;
   

   this 关键字指向调用 myForEach 的数组对象，因此我们将其保存到变量 array 中。

3. 获取数组长度：

   const length = array.length;
   

   保存数组的长度，以便在循环中使用。

4. 遍历数组：

   for (let i = 0; i < length; i++) {
     const element = array[i];
   

   使用 for 循环遍历数组的每一个元素。

5. 获取当前元素：

   const element = array[i];
   

   获取当前索引位置的元素。

6. 调用回调函数：

   callback.call(thisArg, element, i, array);
   

   使用 call 方法来调用回调函数，并传入 thisArg 作为回调函数内部的 this 值。回调函数的参数包括当前元素、当前索引和数组本身。

使用示例

使用我们自定义的 myForEach 方法来遍历一个数组：

const arr = [1, 2, 3, 4];

arr.myForEach(function(element, index, array) {
  console.log('Element:', element);
  console.log('Index:', index);
  console.log('Array:', array);
});

// 输出:
// Element: 1
// Index: 0
// Array: [1, 2, 3, 4]
// ...

总结

• forEach 遍历数组的每个元素，并对每个元素执行回调函数。
• 实现 forEach 涉及到验证回调函数、遍历数组、并在每次迭代中调用回调函数。
• 自定义实现可以帮助理解 JavaScript 内建方法的工作原理，但实际使用时还是推荐使用 JavaScript 提供的原生 forEach 方法，因为它已经经过高度优化并处理了各种边界情况。