• 添加类

  • 在开头添加元素：unshift，返回新数组长度， pushA
  • 在末尾添加元素：push，返回新长度，改变数组， push
  • 在任意位置添加：splice(i,0, ...) pushAt
  • 连接两个数组，返回新数组，concat —— add

• 删除

  • 删除第一个元素，返回被删除元素：shift —— deleteA
  • 删除最后一个元素，返回被删除元素：pop —— deleteZ
  • 按位置删除：splice(i,n)，i：位置；n：数量 deleteAt(i,n)

• 修改

  • 按位置修改
  • 清空后重新添加
  • 交换位置 splice(i,n)

• 查找

• 转换

  • 拆分为数组：split
  • 合并为字符串：jion

• 其他

  • 排序：sort
  • 数组反转：reverse
  • slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

好像做成表格更清晰

• 添加类

换成别名是不是更好记了呢。

• 删除类

继承 Array

首先继承 Array 做一个子类，这样可以把自己做的函数挂在子类的原型上面，而不是Array 上面。

虽然多了一层，但是不会影响 Array 结构。

/**
 * 继承 Array，做一个子类
 */
 export default class BaseArray extends Array {
  constructor (_info) {
    // 调用父类的 constructor()
    super()
    // 设置初始值
    if (Array.isArray(_info)) {
      this.push(..._info)
    } else {
      this.push(_info)
    }
  }
}

挂上添加类的函数

• 添加类

  /**
   * 在开头添加，封装 unshift
   * @param {*} val 一个或者多个新元素
   * @returns 返回新数组的长度
   */
  pushA() {
    return this.unshift(...arguments)
  }
  /**
   * 在指定位置i开始添加新元素，封装 splice
   * @param { int } i 从 0 开始的位置
   * @param { * } val 要添加的新元素
   * @returns 返回新数组的长度
   */
  pushAt(i, val) {
    console.log(arguments)
    const tmp = Array.from(arguments).slice(1)
    this.splice(i, 0, ...tmp)
    return this.length
  }

感觉还是蛮简单的。

• 删除类

  /**
   * 删除第一个元素
   * @returns 返回被删除的元素
   */
  deletaA() {
    return this.shift()
  }
  /**
   * 删除从指定位置 i 开始的 n 个元素
   * @param {*} i 从 0 开始的位置
   * @param {*} n 删除多少个元素
   * @returns 返回被删除的元素
   */
  deleteAt(i, n) {
    return this.splice(i, n)
  }
  /**
   * 删除最后一个元素
   * @returns 返回被删除的元素
   */
  deleteZ() {
    return this.pop()
  }

• 修改类

  /**
   * 交换两个数组元素的位置
   * @param { int } i1 
   * @param { int } i2 
   */
  swap(i1, i2) {
    const tmp = this[i1]
    this[i1] = this[i2]
    this[i2] = tmp
  }

使用

  const tmp = new BaseArray(info)
  const test = reactive(tmp)
  

  添加类：<br>
  <button type="" @click="test.pushA({name:'pushA', age: 15})">在开始位置添加</button>
  添加一个元素，在开头
  <br><br>
  <button type="" @click="test.pushAt(2, {name:'pushAt', age: 65})">在指定位置添加</button>
  添加一个元素，在指定位置 2 添加一个
  <br><br>
  <button type="" @click="test.pushAt(3, {name:'pushAt11', age: 75}, {name:'pushAt12', age: 76})">在指定位置添加</button>
  添加一个元素，在指定位置 3 添加多个
  <br><br>
  <hr>
  删除类：<br>
  <button type="" @click="test.deletaA()">删除第一个</button>
  删除第一个
  <br><br>
  <button type="" @click="test.deletaZ()">删除最后一个</button>
  删除最后一个
  <br><br>
  <button type="" @click="test.deletaAt(2, 3)">删除指定位置</button>
  删除指定位置 2 ，开始 3个
  <br><br>

这样就可以了。

看着还是头疼，先这样把，以后再完善。