剖析 JS 数组常用方法的底层实现，深挖前端技术细节

2024-01-24 15:53:37

在 JavaScript 中，数组是一种非常重要的数据结构，它可以存储各种类型的数据元素。为了方便对数组进行操作，JavaScript 提供了许多内置的数组方法，这些方法可以帮助我们轻松实现各种数组操作。

了解这些数组方法的底层实现，可以帮助我们更深入地理解 JavaScript 语言的工作原理，同时也可以帮助我们更好地优化代码性能。

1. push 方法的底层实现

Array.prototype.push = function() {
  for (let i = 0; i < arguments.length; i++) {
    this[this.length] = arguments[i];
  }
  return this.length;
};

push 方法的作用是将一个或多个元素添加到数组的末尾，并返回新数组的长度。

从底层实现来看，push 方法首先会循环遍历传入的所有参数，然后将每个参数依次添加到数组的末尾。最后，返回新数组的长度。

2. pop 方法的底层实现

Array.prototype.pop = function() {
  if (this.length === 0) {
    return undefined;
  }
  const lastElement = this[this.length - 1];
  this.length--;
  return lastElement;
};

pop 方法的作用是移除数组中的最后一个元素，并返回该元素。

从底层实现来看，pop 方法首先会检查数组是否为空，如果为空则返回 undefined。然后，取出数组中最后一个元素，并减少数组的长度。最后，返回最后一个元素。

3. slice 方法的底层实现

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

slice 方法的作用是创建一个新的数组，其中包含从 start 到 end-1 的元素。

从底层实现来看，slice 方法首先会处理 start 和 end 参数。如果 start 小于 0，则将 start 加上数组的长度。如果 end 没有指定，则将 end 设置为数组的长度。如果 end 小于 0，则将 end 加上数组的长度。

然后，创建一个新的数组 result，并循环遍历从 start 到 end-1 的元素，将每个元素添加到 result 中。最后，返回 result 数组。

4. map 方法的底层实现

Array.prototype.map = function(callbackfn, thisArg) {
  if (thisArg === undefined) {
    thisArg = window;
  }
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callbackfn.call(thisArg, this[i], i, this));
  }
  return result;
};

map 方法的作用是创建一个新的数组，其中包含原数组中每个元素经过 callbackfn 处理后的结果。

从底层实现来看，map 方法首先会检查 thisArg 参数是否指定，如果未指定则将 thisArg 设置为 window 对象。然后，创建一个新的数组 result，并循环遍历原数组中的每个元素。对于每个元素，调用 callbackfn，并将 callbackfn 的返回值添加到 result 数组中。最后，返回 result 数组。

5. reduce 方法的底层实现

Array.prototype.reduce = function(callbackfn, initialValue) {
  if (this.length === 0 && initialValue === undefined) {
    throw new TypeError("Reduce of empty array with no initial value");
  }
  let accumulator = initialValue;
  if (initialValue === undefined) {
    accumulator = this[0];
    i = 1;
  }
  for (let i = 0; i < this.length; i++) {
    accumulator = callbackfn(accumulator, this[i], i, this);
  }
  return accumulator;
};