在 MDN 文档中手写数组实例方法，玩转面试中的基本功

2024-02-08 18:49:17

对于许多程序员来说，尤其是在前端领域，手写 JavaScript 原生 API 在面试中是一个必不可少的环节。熟练掌握这些基础知识可以极大地增强你的竞争力，展现出你的扎实功底。

最近，笔者在翻阅 MDN 文档时，恰好看到了关于数组实例方法的部分。闲来无事，不妨手写几个实例方法来玩玩，顺便复习一下这些基本内容，并与大家分享。

手写数组实例方法

下面，我们就来手写几个常见的数组实例方法：

1. push()

Array.prototype.push = function (element) {
  this[this.length] = element;
  return this.length;
};

2. pop()

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

3. shift()

Array.prototype.shift = function () {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i + 1];
  }
  delete this[this.length - 1];
  this.length--;
  return this[0];
};

4. unshift()

Array.prototype.unshift = function (element) {
  for (let i = this.length; i >= 0; i--) {
    this[i + 1] = this[i];
  }
  this[0] = element;
  this.length++;
  return this.length;
};

5. concat()

Array.prototype.concat = function (...arrays) {
  let newArr = this;
  for (const array of arrays) {
    for (const element of array) {
      newArr.push(element);
    }
  }
  return newArr;
};

6. slice()

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

7. splice()

Array.prototype.splice = function (start, deleteCount, ...items) {
  if (start < 0) {
    start += this.length;
  }
  if (deleteCount < 0) {
    deleteCount = 0;
  }
  const deletedItems = this.slice(start, start + deleteCount);
  for (let i = start + deleteCount; i < this.length; i++) {
    this[i - deleteCount] = this[i];
  }
  this.length -= deleteCount;
  for (let i = this.length; i >= start + deleteCount; i--) {
    this[i] = items[i - start - deleteCount];
  }
  return deletedItems;
};

8. reverse()

Array.prototype.reverse = function () {
  for (let i = 0, j = this.length - 1; i < j; i++, j--) {
    const temp = this[i];
    this[i] = this[j];
    this[j] = temp;
  }
  return this;
};

9. join()

Array.prototype.join = function (separator) {
  let str = '';
  for (let i = 0; i < this.length; i++) {
    if (i > 0) {
      str += separator;
    }
    str += this[i];
  }
  return str;
};

10. forEach()

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

11. map()

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

12. filter()

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

13. 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;
};