JS Watch监听数组内部的某个属性变化

本文将探讨如何使用JS中的watch监听数组内部的某个属性变化，以及如何在变化时进行相应处理。

一、原理介绍

JS中的watch函数可以通过设置监听器来实时监听对象数据的变化并进行相应处理。在监听数组内部的某个属性变化时，需要用到Object.defineProperty()函数。

Object.defineProperty()函数可以定义一个对象的新属性或修改一个对象的现有属性，并返回该对象。对于数组而言，可以使用该函数来监听数组内部的某个属性。

var arr = ['a', 'b', 'c']; Object.defineProperty(arr, '1', { set: function (newVal) { console.log('数组第二个元素变成了：' + newVal); } }); arr[1] = 'd'; // 控制台输出：数组第二个元素变成了：d

二、用法讲解

1、监听数组的指定属性

首先需要先选择需要监听的数组和指定属性，然后通过Object.defineProperty()函数来设置监听器：

// 定义一个数组和一个监听器 var arr = [{name: 'Mike', age: 25}, {name: 'Lucy', age: 18}]; var listener = function(val) { console.log('监听器被触发，数组的age属性发生了变化，新值为' + val); } // 循环数组的每一个对象，并为其age属性添加监听器 for(var i=0; i<arr.length; i++) { Object.defineProperty(arr[i], 'age', { set: listener // 监听器 }); } // 通过修改数组属性age的值，触发监听器 arr[0].age = 30;

以上代码中，循环遍历数组中的每一个对象，并为其age属性添加了监听器listener。在修改数组属性时，当修改数组内部对象的age属性值时就会触发监听器。

2、监听数组所有属性的变化

如果需要监听数组内部所有属性的变化，可以通过遍历数组属性来实现。

var arr = [{name: 'Mike', age: 25}, {name: 'Lucy', age: 18}]; var listener = function(val, oldVal) { console.log('监听器被触发，数组的值发生了变化，新值为' + val + '，旧值为' + oldVal); }; for(var i=0; i<arr.length; i++) { var obj = arr[i]; for(var key in obj) { Object.defineProperty(obj, key, { set: listener }); } } arr[0].name = 'John'; // 输出：监听器被触发，数组的值发生了变化，新值为John，旧值为Mike

以上代码将遍历数组中的每个对象，再遍历每个对象的属性，并为每个属性设置监听器。通过修改数组属性值时，就会触发监听器。

3、监听数组属性的子属性变化

在一个数组的对象属性中，还有可能存在多重嵌套的情况，此时需要监听子属性的变化。这种情况下，可以在Object.defineProperty()函数中再次调用该函数来监听子属性的变化。

var arr = [{name: 'Mike', info: {age: 25, gender: 'male'}}, {name: 'Lucy', info: {age: 18, gender: 'female'}}]; var listener = function(val, oldVal) { console.log('监听器被触发，数组的值发生了变化，新值为' + val + '，旧值为' + oldVal); }; for(var i=0; i<arr.length; i++) { var obj = arr[i]; Object.defineProperty(obj, 'info', { set: function(val) { for(var key in val) { Object.defineProperty(val, key, { set: listener }); } return val; } }); } arr[0].info.age = 30; // 输出：监听器被触发，数组的值发生了变化，新值为30，旧值为25

以上代码中，在设置属性info的监听器时，再次调用Object.defineProperty()函数，并设置子属性的监听器listener。