js数组实例方法-push,pop,shift,unshift

合集 - js系列(13)

1.js模块化2024-11-292.js拷贝2024-12-053.js继承2024-12-044.new，apply，call，bind方法2024-12-055.手写具有JOSN.stringify功能的方法2024-12-066.js数组一:构造函数和静态方法2024-12-137.js数组实例方法：at，concat，copyWithin2024-12-168.js数组实例方法：entries，every，fill2024-12-229.js数组实例方法：filter，find，findIndex2024-12-2510.js数组实例方法:findLast，findLastIndex，flat，flatMap01-0111.js数组实例方法：forEach，includes，indexOf01-0312.js数组实例方法-lastIndexOf，join，keys，map01-06

13.js数组实例方法-push,pop,shift,unshift02-14

收起

Array.prototype.push()

• push() 方法将指定的元素添加到数组的末尾，并返回新的数组长度
• 语法
  • push()
  • push(element0)
  • push(element0, element1)
  • push(element0, element1, … , elementN)
• 参数
  • elementN:添加到数组末尾的元素
• 返回值:调用方法的对象的新 length 属性
• Array.prototype.myPush

Array.prototype.myPush = function (...args) {
  // 字符串因为不可变，所以不可以操作
  if (Object.prototype.toString.call(this) === '[object String]') {
    throw new TypeError(
      "Cannot assign to read only property 'length' of object '[object String]'"
    )
  }
  let len = args.length
  const length = this.length || 0
  let i = 0
  while (i < len) {
    this[length + i] = args[i]
    i++
    this.length = length + i
  }
  return this.length
}

Array.prototype.pop()

• pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度
• 语法:pop()
• 返回值:从数组中删除的元素（当数组为空时返回 undefined）
• Array.prototype.myPop

Array.prototype.myPop = function () {
  // 当this没有length值的时候，设置为默认值0
  this.length = this.length || 0
  // 保存当前length值
  const len = this.length
  // 保存最后一个元素的值
  const last = this[len - 1]
  // 删除最后一个元素
  delete this[len - 1]
  // 如果是非数组类型等length不会自动删除的对象，则手动删除，此时length需要大于0并大于len-1
  if (this.length > 0 && this.length > len - 1) {
    this.length = len - 1
  }
  // 返回最后一个值
  return last
}

Array.prototype.shift()

• shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
• 语法:shift()
• 返回值:从数组中删除的元素；如果数组为空则返回 undefined
• Array.prototype.myShift

Array.prototype.myShift = function () {
  // 字符串不支持
  if (Object.prototype.toString.call(this) === '[object String]') {
    throw TypeError(
      "Cannot assign to read only property '0' of object '[object String]'"
    )
  }
  const len = this.length || 0
  if (len <= 0) {
    // 对象的length如果不存在，需要设置为0
    if (this.length === undefined) {
      this.length = 0
    }
    return undefined
  }
  const first = this[0]
  for (let i = 0; i <= len - 1; i++) {
    // 最后一个键需要删除
    if (i + 1 === len) {
      delete this[i]
    }
    // 数组可直接操作，对象需要判断key是否存在
    if (Array.isArray(this) || this.hasOwnProperty(i + 1)) {
      this[i] = this[i + 1]
    }
  }
  this.length = len - 1
  return first
}

Array.prototype.unshift()

• unshift() 方法将指定元素添加到数组的开头，并返回数组的新长度。
• 语法
  • unshift()
  • unshift(element1)
  • unshift(element1, element2)
  • unshift(element1, element2, /* …, */ elementN)
• 参数
  • element1、…、elementN: 添加到 arr 开头的元素。
• 返回值: 返回调用方法对象的新 length 属性。
• Array.prototype.myUnshift

const len = rest.length
  const thisLen = this.length || 0
  // 重置原数组/类数组对象元素的值 从后向前重置，防止出现值被重置之后再赋值的情况,完成赋值后需要将原位置删除
  for (let i = thisLen - 1; i >= 0; i--) {
    if (this.hasOwnProperty(i)) {
      this[i + len] = this[i]
      delete this[i]
    }
  }
  // 将值插入到数组\类数组对象中
  for (let j = 0; j < len; j++) {
    if (rest.hasOwnProperty(j)) {
      this[j] = rest[j]
    }
  }
  // 如果this不是数组，需要将length进行手动变更
  if (!Array.isArray(this)) {
    this.length = thisLen + len
  }
  return this.length