手撕JS，畅游数组之海，助你面试披荆斩棘

前端

2023-10-20 08:48:07

数组方法的妙用：从原理到面试直通车

踏上JavaScript数组之旅

在JavaScript的浩瀚宇宙中，数组扮演着至关重要的角色。作为一种强大的数据结构，数组为我们提供了一种有效的方法来管理有序的数据集合。而数组方法，就像一把把开启数组宝库的钥匙，赋予其强大的处理和操作能力。

对于前端开发工程师来说，数组方法是面试中不可或缺的考察点。掌握它们的原理和应用至关重要。然而，仅仅死记硬背这些方法远远不够。真正的理解需要我们动手实践，从原理出发，逐一实现这些方法。

手撕JS，从原理到实战

1. Array.prototype.forEach()

这个方法遍历数组中的每个元素，并执行提供的回调函数。它不会改变原始数组，而只是执行回调函数。

实现：

Array.prototype.forEach = function(callback) {
  for (let i = 0; i < this.length; i++) {
    callback(this[i], i, this);
  }
};

2. Array.prototype.map()

map方法遍历数组中的每个元素，并将其传递给回调函数。它返回一个新数组，其中每个元素是回调函数的返回值。

实现：

Array.prototype.map = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  return result;
};

3. Array.prototype.filter()

filter方法遍历数组中的每个元素，并根据提供的回调函数对其进行过滤。它返回一个新数组，其中只包含通过回调函数测试的元素。

实现：

Array.prototype.filter = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

4. Array.prototype.reduce()

reduce方法遍历数组中的每个元素，并将其传递给回调函数。它将回调函数的返回值与累加器（初始值或前一次回调函数的返回值）累积起来，最终返回累加器的值。

实现：

Array.prototype.reduce = function(callback, initialValue) {
  let accumulator = initialValue;
  for (let i = 0; i < this.length; i++) {
    accumulator = callback(accumulator, this[i], i, this);
  }
  return accumulator;
};

5. Array.prototype.sort()

sort方法对数组中的元素进行排序。它使用快排算法，将数组中的元素按照升序或降序排列。

实现：

Array.prototype.sort = function(compareFunction) {
  if (!compareFunction) {
    compareFunction = (a, b) => a - b;
  }
  for (let i = 0; i < this.length - 1; i++) {
    for (let j = i + 1; j < this.length; j++) {
      if (compareFunction(this[i], this[j]) > 0) {
        const temp = this[i];
        this[i] = this[j];
        this[j] = temp;
      }
    }
  }
  return this;
};