JavaScript如何监测数组的变化

前言

之前介绍defineProperty的时候说到,其只能监测对象的变化,并不能监测数组的变化。

本文致力于说清楚怎么实现监测数组的变化。

核心思路:找到改变原数组的方法,然后对这些方法进行劫持处理。

上面这句话,是重中之重,务必读三遍,记住了,再往下走。

改变原数组,常用到的方法有push pop shift unshift reverse sort splice。

换言之,这些方法是改变数组的入口。

在数组实例和数组原型之间,加一个新的原型

直接修改Array.prototype,是极其危险的。

换一个思路,复制已有的数组原型,然后修改其中的方法,但这里因为原型上的方法不可枚举,自然也就没法复制。

于是再换一个思路,在数组和数组的原型之间,插入一个原型,形成原型链,数组 => 新原型 => 数组的原型,可以在新原型上增加同名的方法就可以了。

先借助伪代码理解:

// 伪代码
let arr = [];
arr.__proto__ = newPrototype;
newPrototype.__proto__ = Array.prototype;
// 然后可以在新原型上添加同名的方法就可以了
newPrototype.push = xxx;

转换成真实的代码如下,核心使用了Object.create

// Object.create返回一个新对象,而来新对象的__proto__就是传进去的参数。
let newPrototype = Object.create(Array.prototype);
// 然后可以在新原型上添加同名的方法就可以了
newPrototype.push = xxx;

// 需要监测的数组,绑定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

以 push 为例,劫持 push

就是在新原型上重新写一个 push 的方法,里面执行老的 push,但除此之外还可以做点别的事。

let newPrototype = Object.create(Array.prototype);

// 在新原型上添加同名push
newPrototype.push = function(...args) {
  // 语义化this
  let curArr = this;
  console.log("使用了push");
  // 最后还是会执行原始的push
  return Array.prototype.push.call(curArr, ...args);
};

// 需要监测的数组,绑定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

// 执行push的时候,就会打印了
arr.push(1);

然后其他的方法也是类似的,试着写写其他的方法

劫持其他的方法

将其他方法也一起写了,因为逻辑一样,直接遍历即可。

let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];

methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`使用了${method}`);
    return Array.prototype[method].call(this, ...args);
  };
});

// 需要监测的数组,绑定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

// 执行的时候,就会打印了
arr.push(1);
arr.pop();

数组里有数组项的话,也是需要监测的

这里数组里可能也是有数组的,需要遍历数组的每项,如果是数组的话依然需要指向新的原型。

嗯,对,用到递归了。

let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];

methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`使用了${method}`);
    return Array.prototype[method].call(this, ...args);
  };
});

function observeArr(arr) {
  // 既是条件限制,也是递归的终止条件
  if (!Array.isArray(arr)) {
    return;
  }
  // 整个数组指向新的原型
  arr.__proto__ = newPrototype;
  // 数组的每项,如果是数组,也指向新的原型。
  arr.forEach(observeArr);
}
// 需要监测的数组,绑定新的原型就可以了
let arr = [[1, 2, 3]];
observeArr(arr);

// 执行的时候,就会打印了
arr[0].push(1);
arr[1].pop();

数组新添加的项,如果是数组也需要指向新的原型

能添加元素的方法:push unshift splice。

找到新加的元素,然后是数组的也同样指向新的原型

let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];

methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`使用了${method}`);
    let inserted;
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
      default:
        break;
    }
    inserted && observeArr(inserted);
    return Array.prototype[method].call(this, ...args);
  };
});

function observeArr(arr) {
  // 即是条件限制,也是递归的终止条件
  if (!Array.isArray(arr)) {
    return;
  }
  // 整个数组指向新的原型
  arr.__proto__ = newPrototype;
  // 数组的每项,如果是数组,也指向新的原型。
  arr.forEach(observeArr);
}
// 这里可以导出去,方便别的文件使用
export default observeArr;
// 需要监测的数组,绑定新的原型就可以了
let arr = [];
observeArr(arr);
let addItem = [1, 2, 3];
arr.push(addItem);
// 执行的时候,就会打印了
addItem.push(1);
addItem.pop();

综合使用 defineProperty 监测对象和数组

现在已经有了监测对象的方法,也有了监测数组的方法,将两个综合起来,就能监测数组里面的对象,对象里面的数组了。

将监测数组和监测对象的的可以单独写成一个文件,方便之后使用。

这里为了方便直接运行代码,直接放在一块了。

/**
 * observeArr的部分
 **/
// 生成新的原型
let newPrototype = Object.create(Array.prototype);

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];
// 在新原型上面添加以上方法,实现劫持
methods.forEach(method => {
  newPrototype[method] = function(...args) {
    console.log(`使用了${method}`);
    let inserted;
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
      default:
        break;
    }
    inserted && observeArr(inserted);
    return Array.prototype[method].call(this, ...args);
  };
});

function observeArr(arr) {
  // 新加!!!是对象的话,需要用对象
  if (Object.prototype.toString.call(arr) === "[object Object]") {
    observeObj(arr);
    return;
  }

  if (Array.isArray(arr)) {
    // 整个数组指向新的原型
    arr.__proto__ = newPrototype;
    // 数组的每项,如果是数组,也指向新的原型。
    arr.forEach(observeArr);
  }

  // 不是对象或者数组的,什么都不做
}

/**
 * observeObj的部分
 **/
function observeObj(obj) {
  // 加上参数限制,必须是对象才有劫持,也是递归的终止条件
  if (typeof obj !== "object" || obj == null) {
    return;
  }
  // 新加!!!数组交给数组处理
  if (Array.isArray(obj)) {
    observeArr(obj);
    return;
  }
  // 是对象的话 才开始递归
  for (let key in obj) {
    // 直接使用 obj.hasOwnProperty会提示不规范
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      observeKey(obj, key);
      // 这里劫持该属性的属性值,如果不是对象直接返回,不影响
      observeObj(obj[key]);
    }
  }
  return obj;
}
function observeKey(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      console.log("读取属性", value);
      return value;
    },
    set(newValue) {
      console.log("设置属性", newValue);
      value = newValue;
    }
  });
}

/**
 * demo试试
 **/
let data = { a: 1, b: [1, 2, { c: 2 }] };
observeObj(data);
data.a = 2;
data.b.push([2, 3]);

let arr = [{ a: "数组里的对象" }, 3, 4];
observeArr(arr);
arr[0].a = 3;

缺陷

当然数组其实可以不通过方法改变,比如直接删除数组可以直接使用 length 属性,或者直接arr[0]=xxx改变数组。

但只有当使用"push","pop", "shift","unshift","reverse","sort","splice"才能检测到数组变化。

这也是 vue 的缺陷,当然新版的 proxy 将干掉这个缺陷。

所以在使用 vue 的过程中,要尽量使用以上方法操作数组~~~

附注:查看数组的所有属性和方法

在控制台可以输入dir([]),然后能看到数组所有的属性和方法。

具体用法,可以直接到到mdn 上细看,点击侧边栏看对应的方法

总结

到此这篇关于JavaScript如何监测数组变化的文章就介绍到这了,更多相关JS监测数组变化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-07-17

JS array 数组详解

1.数组的声明方法 (1): arrayObj = new Array(); //创建一个数组. 复制代码 代码如下: var arr1 = new Array(); (2):arrayObj = new Array([size]) 创建一个数组并指定长度,注意不是上限,是长度. 复制代码 代码如下: var a = new Array(5); (3):arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) 创建一个数组并赋

Swift4.0 Array数组详解

数组的介绍 数组(Array)是一串有序的由相同类型元素构成的集合,数组中的集合元素是有序的,可以重复出现.在Swift中数组类型是Array,是一个泛型集合.数组分成:可变数组和不可变数组,分别使用let修饰的数组是不可变数组,使用var修饰的数组是可变数组. 数组的初始化 一.初始化一个空数组(类型:[数据类型]()) 1.创建一个整形的空数组 let  array = [Int] () 这里array 数组变量 被let 修辞 ,array数组是不可变数组,只能访问,不能修改 var  a

js中的关联数组与普通数组详解

var privArr = []; privArr['staProjQueryGrid'] = [{ btn_id : 'but_add', roles : ['2001','2005'] }] console.log(privArr,privArr.staProjQueryGrid[0].btn_id) 第一行是定义一个数组priArr,第二行是给这个数组添加一个属性staProjQueryGird,这个属性值是一个数组.打印结果是  but_add var unPrivArr = [];//

数据结构之数组Array实例详解

数据结构之数组Array实例详解 数组Array 基本操作 Status InitArray(int dimm,...)//若维数dim和随后的各维长度合法,则构造相应的数组A,并返回OK Status DestroyArray() //销毁数组A Status Locate(va_list ap,int &off) //若ap指示的各下标值合法,则求出该元素在A中相对地址off Status Value(ElemType &e,...) //A是n维数组,e为元素变量,随后是n个下标值.

JS hashMap实例详解

Hashmap是一种非常常用的.应用广泛的数据类型.本文通过实例代码给大家介绍js hashMap的相关知识,具体代码内容如下所示: /** * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key)

js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

js array数组对象操作方法汇总

js 数组对象操作方法如下: 1. 创建数组 var array1 = [1,2] //方法一 var array2 = new Array() //方法二 array[0] = 1; array[1] = 2; 2.遍历数组 for循环 和for...in 循环 var array1 = [1,2]; var l = array1.length; //for循环 for(var i=0;i< l;i++){ console.log(array1 [i]); } //for...in 循环 fo

Js面试算法详解

素数 Q:你将如何验证一个素数? A:一个素数只能被它自己和1整除.所以,我将运行一个while循环并加1.(看代码示例,如果你无法理解,那这不是你的菜.先回去学习javaScript基础知识然后再回来吧.) 方法1 function isPrime(n){ var divisor = 2; while (n > divisor){ if(n % divisor == 0){ return false; } else divisor++; } return true; } isPrime(137

JS库之Highlight.js的用法详解

官网:https://highlightjs.org/ 下载地址:https://highlightjs.org/download/ 下载到本地后,新建个页面测试 1.在head中加入css和js的引用 <head> <title>highlight</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link r

JS 实现计算器详解及实例代码(一)

Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板