Vue监测数组变化，并返回数组长度

最新推荐文章于 2023-10-16 20:13:23 发布

Hioow

最新推荐文章于 2023-10-16 20:13:23 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46623496/article/details/119806866

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了一种方法来监测JavaScript数组的变化，通过重写Array原型上的方法，当执行如push、pop、slice等操作时，会打印出触发的事件及数组长度的变化。示例中创建了一个新的数组原型，监听数组方法并记录长度变化，最后通过一个例子展示了如何应用到实际的数组操作上。

摘要由CSDN通过智能技术生成

监测数组变化，并返回数组长度

// 获取Array的原型，并创建一个新的对象指向这个原型
    // const arrayMethods = Object.create(Array.prototype)
    // 创建一个新的原型，这就是改造之后的数组原型
    const ArrayProto = []
    // 重新构建Array原型里面的虽有方法
    Object.getOwnPropertyNames(Array.prototype).forEach(method => {
      if (typeof Array.prototype[method] === "function") {
        ArrayProto[method] = function () {
          console.log("我已经监听到数组触发了" + method + "事件")
          let len = this.length
          let result = Array.prototype[method].apply(this, arguments)
          console.log(len, this.length);
          if (len !== this.length) return this.length
          return result
        }
      }
    })
    let list = [1, 2, 3]
    // 将数组的原型链指向新构造的原型
    list.__proto__ = ArrayProto
    // 执行push事件
    console.log(list.push(2), list.pop(2), list.slice(2), list.unshift(2));