全面剖析 JS 中的操作对象、数组方法：call、apply、bind、find、map、forEach、filter 的手动实现

2023-10-27 04:57:07

前言

在 JS 的浩瀚世界中，操作对象和数组的方法可谓是点睛之笔，它们能够大幅简化我们的编程工作，提高代码的可读性和可维护性。然而，仅仅掌握这些方法的用法并不能让我们成为真正的 JS 大师。为了更深入地理解这些方法的奥秘，我们不妨尝试手动实现它们，从而从根本上掌握它们的运作机制。

揭秘 JS 操作对象、数组方法的实现原理

1. call 方法

call 方法允许我们通过指定一个对象作为上下文，来调用该对象的方法。手动实现 call 方法的关键在于，我们需要明确指定上下文对象，并使用 apply 方法将参数传递给该方法。

Function.prototype.myCall = function (context, ...args) {
  // 将函数的作用域设置为指定的上下文对象
  context = context || window;
  context.fn = this;
  // 使用 apply 方法将参数传递给该方法
  const result = context.fn(...args);
  // 删除临时函数
  delete context.fn;
  return result;
};

2. apply 方法

apply 方法与 call 方法相似，但它允许我们通过数组的形式传递参数。手动实现 apply 方法时，我们需要将参数数组展开，并使用 call 方法调用该方法。

Function.prototype.myApply = function (context, args) {
  // 将函数的作用域设置为指定的上下文对象
  context = context || window;
  context.fn = this;
  // 展开参数数组
  const result = context.fn(...args);
  // 删除临时函数
  delete context.fn;
  return result;
};

3. bind 方法

bind 方法可以创建指定函数的一个副本，并且可以指定该副本的上下文对象。手动实现 bind 方法时，我们需要创建一个新的函数，并使用 call 或 apply 方法指定上下文对象。

Function.prototype.myBind = function (context, ...args1) {
  const fn = this;
  // 返回一个新的函数
  return function (...args2) {
    // 使用 apply 方法调用原函数
    return fn.apply(context, [...args1, ...args2]);
  };
};

4. find 方法

find 方法用于从数组中查找第一个满足指定条件的元素。手动实现 find 方法时，我们需要遍历整个数组，并使用条件判断来查找满足条件的元素。

Array.prototype.myFind = function (callback) {
  // 遍历数组
  for (let i = 0; i < this.length; i++) {
    // 使用条件判断来查找满足条件的元素
    if (callback(this[i], i, this)) {
      return this[i];
    }
  }
  // 如果没有找到满足条件的元素，则返回 undefined
  return undefined;
};

5. map 方法

map 方法用于将数组中的每个元素都映射到一个新数组中。手动实现 map 方法时，我们需要遍历整个数组，并使用回调函数来处理每个元素。

Array.prototype.myMap = function (callback) {
  // 创建一个新数组
  const newArr = [];
  // 遍历数组
  for (let i = 0; i < this.length; i++) {
    // 使用回调函数来处理每个元素
    newArr.push(callback(this[i], i, this));
  }
  // 返回新数组
  return newArr;
};

6. forEach 方法

forEach 方法用于遍历数组中的每个元素，并执行指定的回调函数。手动实现 forEach 方法时，我们需要遍历整个数组，并使用回调函数来处理每个元素。

Array.prototype.myForEach = function (callback) {
  // 遍历数组
  for (let i = 0; i < this.length; i++) {
    // 使用回调函数来处理每个元素
    callback(this[i], i, this);
  }
};

7. filter 方法

filter 方法用于从数组中过滤出所有满足指定条件的元素，并返回一个新数组。手动实现 filter 方法时，我们需要遍历整个数组，并使用条件判断来过滤出满足条件的元素。

Array.prototype.myFilter = function (callback) {
  // 创建一个新数组
  const newArr = [];
  // 遍历数组
  for (let i = 0; i < this.length; i++) {
    // 使用条件判断来过滤出满足条件的元素
    if (callback(this[i], i, this)) {
      newArr.push(this[i]);
    }
  }
  // 返回新数组
  return newArr;
};