用Javascript 手写十个常用的数组方法（上）

2023-12-23 19:50:43

精通数组：手写十大常用数组方法

概述

数组是 JavaScript 中强大的数据结构，提供了各种操作数据的有效方法。内置的数组方法极大地简化了我们的开发任务，但有时候手写这些方法可以加深我们对数组的理解。本文将深入探讨如何手写十个常用数组方法，让你成为数组操作的大师。

1. push() 方法

用途： 向数组末尾添加元素

语法：

Array.prototype.push(element1, element2, ...)

代码实现：

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

2. pop() 方法

用途： 删除数组最后一个元素

语法：

Array.prototype.pop()

代码实现：

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

3. unshift() 方法

用途： 向数组开头添加元素

语法：

Array.prototype.unshift(element1, element2, ...)

代码实现：

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

4. shift() 方法

用途： 删除数组第一个元素

语法：

Array.prototype.shift()

代码实现：

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

5. reverse() 方法

用途： 反转数组元素顺序

语法：

Array.prototype.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;
};

6. concat() 方法

用途： 合并两个或多个数组

语法：

Array.prototype.concat(array1, array2, ...)

代码实现：

Array.prototype.concat = function() {
  const newArr = [];
  for (let i = 0; i < this.length; i++) {
    newArr.push(this[i]);
  }
  for (let j = 0; j < arguments.length; j++) {
    if (Array.isArray(arguments[j])) {
      for (let k = 0; k < arguments[j].length; k++) {
        newArr.push(arguments[j][k]);
      }
    } else {
      newArr.push(arguments[j]);
    }
  }
  return newArr;
};

7. indexOf() 方法

用途： 返回元素在数组中的索引，如果不存在返回 -1

语法：

Array.prototype.indexOf(element, fromIndex)

代码实现：

Array.prototype.indexOf = function(searchElement, fromIndex = 0) {
  for (let i = fromIndex; i < this.length; i++) {
    if (this[i] === searchElement) {
      return i;
    }
  }
  return -1;
};

8. lastIndexOf() 方法

用途： 返回元素在数组中的最后一个索引，如果不存在返回 -1

语法：

Array.prototype.lastIndexOf(element, fromIndex)

代码实现：

Array.prototype.lastIndexOf = function(searchElement, fromIndex = this.length - 1) {
  for (let i = fromIndex; i >= 0; i--) {
    if (this[i] === searchElement) {
      return i;
    }
  }
  return -1;
};

9. slice() 方法

用途： 返回数组中指定范围内的元素

语法：

Array.prototype.slice(start, end)

代码实现：

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

10. join() 方法

用途： 将数组元素连接成一个字符串

语法：

Array.prototype.join(separator)

代码实现：

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