JavaScript如何監測數組的變化

前言

的時(shí)候說(shuō)到，其只能監測對象的變化，并不能監測數組的變化。

本文致力于說(shuō)清楚怎么實(shí)現監測數組的變化。

核心思路：找到改變原數組的方法，然后對這些方法進(jìn)行劫持處理。

上面這句話(huà)，是重中之重，務(wù)必讀三遍，記住了，再往下走。

改變原數組，常用到的方法有push pop shift unshift reverse sort splice。

換言之，這些方法是改變數組的入口。

在數組實(shí)例和數組原型之間，加一個(gè)新的原型

直接修改Array.prototype，是極其危險的。

換一個(gè)思路，復制已有的數組原型，然后修改其中的方法，但這里因為原型上的方法不可枚舉，自然也就沒(méi)法復制。

于是再換一個(gè)思路，在數組和數組的原型之間，插入一個(gè)原型，形成原型鏈，數組 => 新原型 => 數組的原型，可以在新原型上增加同名的方法就可以了。

先借助偽代碼理解：

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

轉換成真實(shí)的代碼如下，核心使用了，

// Object.create返回一個(gè)新對象，而來(lái)新對象的__proto__就是傳進(jìn)去的參數。
let newPrototype = Object.create(Array.prototype);
// 然后可以在新原型上添加同名的方法就可以了
newPrototype.push = xxx;

// 需要監測的數組，綁定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

以 push 為例，劫持 push

就是在新原型上重新寫(xiě)一個(gè) push 的方法，里面執行老的 push，但除此之外還可以做點(diǎn)別的事。

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

// 在新原型上添加同名push
newPrototype.push = function(...args) {
  // 語(yǔ)義化this
  let curArr = this;
  console.log("使用了push");
  // 最后還是會(huì )執行原始的push
  return Array.prototype.push.call(curArr, ...args);
};

// 需要監測的數組，綁定新的原型就可以了
let arr = [];
arr.__proto__ = newPrototype;

// 執行push的時(shí)候，就會(huì )打印了
arr.push(1);

然后其他的方法也是類(lèi)似的，試著(zhù)寫(xiě)寫(xiě)其他的方法

劫持其他的方法

將其他方法也一起寫(xiě)了，因為邏輯一樣，直接遍歷即可。

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;

// 執行的時(shí)候，就會(huì )打印了
arr.push(1);
arr.pop();

數組里有數組項的話(huà)，也是需要監測的

這里數組里可能也是有數組的，需要遍歷數組的每項，如果是數組的話(huà)依然需要指向新的原型。

嗯，對，用到遞歸了。

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;
  }
  // 整個(gè)數組指向新的原型
  arr.__proto__ = newPrototype;
  // 數組的每項，如果是數組，也指向新的原型。
  arr.forEach(observeArr);
}
// 需要監測的數組，綁定新的原型就可以了
let arr = [[1, 2, 3]];
observeArr(arr);

// 執行的時(shí)候，就會(huì )打印了
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;
  }
  // 整個(gè)數組指向新的原型
  arr.__proto__ = newPrototype;
  // 數組的每項，如果是數組，也指向新的原型。
  arr.forEach(observeArr);
}
// 這里可以導出去，方便別的文件使用
export default observeArr;
// 需要監測的數組，綁定新的原型就可以了
let arr = [];
observeArr(arr);
let addItem = [1, 2, 3];
arr.push(addItem);
// 執行的時(shí)候，就會(huì )打印了
addItem.push(1);
addItem.pop();

綜合使用 defineProperty 監測對象和數組

現在已經(jīng)有了監測對象的方法，也有了監測數組的方法，將兩個(gè)綜合起來(lái)，就能監測數組里面的對象，對象里面的數組了。

將監測數組和監測對象的的可以單獨寫(xiě)成一個(gè)文件，方便之后使用。

這里為了方便直接運行代碼，直接放在一塊了。

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

let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"];
// 在新原型上面添加以上方法，實(shí)現劫持
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) {
  // 新加?。?！是對象的話(huà)，需要用對象
  if (Object.prototype.toString.call(arr) === "[object Object]") {
    observeObj(arr);
    return;
  }

  if (Array.isArray(arr)) {
    // 整個(gè)數組指向新的原型
    arr.__proto__ = newPrototype;
    // 數組的每項，如果是數組，也指向新的原型。
    arr.forEach(observeArr);
  }

  // 不是對象或者數組的，什么都不做
}

/**
 * observeObj的部分
 **/
function observeObj(obj) {
  // 加上參數限制，必須是對象才有劫持，也是遞歸的終止條件
  if (typeof obj !== "object" || obj == null) {
    return;
  }
  // 新加?。?！數組交給數組處理
  if (Array.isArray(obj)) {
    observeArr(obj);
    return;
  }
  // 是對象的話(huà) 才開(kāi)始遞歸
  for (let key in obj) {
    // 直接使用 obj.hasOwnProperty會(huì )提示不規范
    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;

缺陷

當然數組其實(shí)可以不通過(guò)方法改變，比如直接刪除數組可以直接使用 length 屬性，或者直接arr[0]=xxx改變數組。

但只有當使用"push","pop", "shift","unshift","reverse","sort","splice"才能檢測到數組變化。

這也是 vue 的缺陷，當然新版的 proxy 將干掉這個(gè)缺陷。

所以在使用 vue 的過(guò)程中，要盡量使用以上方法操作數組~~~

附注：查看數組的所有屬性和方法

在控制臺可以輸入dir([])，然后能看到數組所有的屬性和方法。

具體用法，可以直接到到

總結

到此這篇關(guān)于JavaScript如何監測數組變化的文章就介紹到這了,更多相關(guān)JS監測數組變化內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！