数组方法的底层原理

本文章主要针对常用数组方法的底层原理进行剖析，对于一些复杂的数组方法后期有时间会加上，感兴趣的大神们可以点个关注不迷路

1、仿写数组 slice() 方法的实现过程

  Array.prototype.mySlice = function (a = 0, b) {
    // let start = 0;
    // let end = this.length
    // console.log(arguments[0])
    // if (arguments.length === 1) {
    //   start = arguments[0]
    // } else if (arguments.length >= 2) {
    //   start = arguments[0]
    //   end = arguments[1]
    // }
    let start = a
    let end = this.length
    if (b) {
      end = b
    }
    let tep = [];
    for (i = start; i < end; i++) {
      tep.push(this[i])
    }
    return tep
  }

  let objArr = {
    0: 12,
    1: 15,
    2: 23,
    3: 99,
    length: 4
  }

  const newArr1 = Array.prototype.mySlice.call(objArr)
  // console.log(newArr1) // [12, 15, 23, 99]
  const newArr2 = Array.prototype.mySlice.call(objArr, 1, 2)
  // console.log(newArr2) // [15]

 2、仿写数组 push() 方法的实现过程,返回新数组的长度

  Array.prototype.myPush = function () {
    for (let i = 0; i < arguments.length; i++) {
      this.length++
      this[this.length - 1] = arguments[i]
    }
    return this.length
  }
  let arr = [1, 23, 3]
  let newArr = arr.myPush(4, 5, 6)
  // console.log(newArr) // 6
  // console.log(arr.myPush(3))  //  7
  console.log(arr)  // [1, 23, 3, 4, 5, 6, 3]

3、数组 pop() 方法的实现过程,返回删除的值，改变原数组的长度

  Array.prototype.myPop = function () {
    let ele = this[this.length - 1]
    this.length--
    return ele
  }
  let arr1 = [1, 2, 3, 4]
  // console.log(arr1.myPop()) // 4
  // console.log(arr1)  // [1,2,3]

4、数组 shift() 方法的实现过程,返回删除的值，改变原数组的长度

  Array.prototype.myShift = function () {
    let temp = this[0]
    for (let i = 0; i < this.length; i++) {
      this[i] = this[i + 1];
    }
    this.length--
    return temp;
  }
  let arr2 = [1, 2, 3, 4]
  // console.log(arr1.myShift()) // 1
  // console.log(arr1)  //  [2, 3, 4]

5、数组 unshift() 方法的实现过程,unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组）

Array.prototype.myUnshift = function () {
    if (arguments.length) {
      for (let i = arguments.length - 1; i >= 0; i--) {
        this.length++
        for (let j = this.length - 1; j >= 0; j--) {
          this[j] = this[j - 1];
        }
        this[0] = arguments[i];
      }
      return this.length
    } else {
      return this.length
    }
  }
  let arr3 = [1, 2, 3, 4]
  // console.log(arr1.myUnshift(5, 6)) // 6
  // console.log(arr1)  //  [5, 6, 1, 2, 3, 4]

6、数组 reverse() 方法的实现过程 reverse() 方法将数组中元素的位置颠倒，并返回该数组

 Array.prototype.myReverse = function () {
    let tempArray = [];
    for (let i = this.length - 1; i >= 0; i--) {
      tempArray.myPush(this[i]) //使用myPush
    }
    for (let j = 0; j < this.length; j++) {
      this[j] = tempArray[j]
    }
    return this
  }
  let arr4 = [1, 2, 3, 4]
  // console.log(arr1.myReverse()) // [4, 3, 2, 1]

7、数组 splice(n,m,x…) 方法的实现过程：从第 n 位删除 m 个元素，并添加一个或者多个元素

Array.prototype.mySplice = function (n, m) {
    // console.log(arguments) // [0,1,99]
    if (arguments.length == 0) {
      return []
    }
    if (n > this.length - 1) {
      return []
    }
    if (arguments.length == 1) {
      return this.mySlice(n)   // 调用 mySlice 方法
    }
    if (arguments.length === 2) {
      if (n + m <= this.length - 1) {
        for (let j = n + m; j < this.length; j++) {
          this[j - m] = this[j]
        }
        this.length -= m;
        return this
      } else {
        return this
      }
    } else {
      if (n + m <= this.length - 1) {
        for (let j = n + m; j < this.length; j++) {
          this[j - m] = this[j]
        }
        this.length -= m;
        for (let i = arguments.length - 1; i >= 2; i--) {
          for (let k = this.length - 1; k >= n; k--) {
            this[k + 1] = this[k]
          }
          this[n] = arguments[i];
        }
        return this;
      } else {
        return this;
      }
    }

  }
  let arr5 = [1, 2, 3, 4]
  // console.log(arr5.mySplice(0, 3, 4)) // [4, 4]

8、数组 sort() 方法的实现过程：数组排序(简单的数组排序)

 // 升序
  Array.prototype.mySort_bubble = function () {
    console.log(arguments);
    for (var i = this.length; i >= 0; i--) {
      for (var j = 0; j < i; j++) {
        if (this[j] > this[j + 1]) {
          var temp = this[j];
          this[j] = this[j + 1];
          this[j + 1] = temp;
        }
      }
    }
    return this;
  }
  let arr6 = [7, 2, 3, 4]
  // console.log(arr6.mySort_bubble())// [2，3，4，7]

  // 降序
  Array.prototype.mySort_choose = function () {
    console.log(arguments);
    for (var i = this.length; i >= 0; i--) {
      for (var j = 0; j < i; j++) {
        if (this[j] < this[j + 1]) {
          var temp = this[j + 1];
          this[j + 1] = this[j];
          this[j] = temp;
        }
      }
    }
    return this;
  }
  // console.log(arr6.mySort_choose())// [7, 4, 3, 2]

 9、数组 concat() 方法的实现过程：拼接数组

Array.prototype.myConcat = function () {
    console.log(arguments);

    for (var i = 0; i < arguments[0].length; i++) {
      this.myPush(arguments[0][i]);
    }
    return this;
  }
  let arr7 = [7, 2, 3, 4]
  let arr8 = [88, 77]
  // console.log(arr7.myConcat(arr8)) //  [7, 2, 3, 4, 88, 77]

10、数组 toString() 方法的实现过程：转化成一个字符

Array.prototype.myToString = function () {
    var temp = ''
    for (var i = 0; i < this.length; i++) {
      if (i != this.length - 1) {
        temp = temp + this[i] + ",";
      } else {
        temp = temp + this[i]
      }
    }
    return temp;
  }
  let arr9 = [88, 77, 44]
  // console.log(arr9.myToString()) // 88,77,44

11、数组 join() 方法的实现过程：转换成字符串

Array.prototype.myJoin = function () {
    var temp = ''
    if (!arguments.length) {
      for (var i = 0; i < this.length; i++) {
        if (i != this.length - 1) {
          temp = temp + this[i] + ",";
        } else {
          temp = temp + this[i]
        }
      }
    } else {
      let s = arguments[0]
      for (var i = 0; i < this.length; i++) {
        if (i != this.length - 1) {
          temp = temp + this[i] + s;
        } else {
          temp = temp + this[i]
        }
      }
    }
    return temp;

  }
  let arr10 = [88, 77, 44]
  // console.log(arr9.myJoin()) // 88,77,44
  // console.log(arr9.myJoin('ss')) // 88ss77ss44