javascript - 如何观察对象数组的变化

Question

Javascript 现在实现了 Object.observe 和 Array.observe，但是我似乎找不到合并功能的方法。

我想做的是拥有一个对象数组。当其中一个对象的任何属性发生变化时，我希望得到通知。

Object.observe 允许我在特定对象的属性更改时收到通知。

Array.observe 允许我在发生数组级别更改时收到通知。

除非我专门观察数组的每个元素，否则我无法知道特定元素属性何时发生变化。

例如:

var model = [
  {
    data: 'Buy some Milk',
    completed: false
  },
  {
    data: 'Eat some Food',
    completed: false
  },
  {
    data: 'Sleep in a Bed',
    completed: false
  },
  {
    data: 'Make Love not War',
    completed: false
  }
];

Array.observe(model, function(changeRecords) {
  console.log('Array observe', changeRecords);
});

model[0].data = 'Teach Me to code';
model[1].completed = true;
model.splice(1,1);
model.push({data: "It's a new one!",completed: true});

控制台输出:

Array observe [Object, Object]
  0: Object
    addedCount: 0
    index: 1
    object: Array[4]
    removed: Array[1]
    type: "splice"
    __proto__: Object
  1: Object
    addedCount: 1
    index: 3
    object: Array[4]
    removed: Array[0]
    type: "splice"
    __proto__: Object
length: 2
__proto__: Array[0]

这两个通知具体涉及:

model.splice(1,1);

和

model.push({data: "It's a new one!",completed: true});

但完全忽略

model[0].data = 'Teach Me to code';

和

model[1].completed = true;

有没有办法观察每一个变化，无论是数组级别还是对象级别的变化？

我知道有些库可以为我做这件事，但我想了解如何在我自己的代码中直接实现它。

---

编辑:好的，看来我没有遗漏任何神奇的功能，唯一正确的选择是观察数组的各个元素。

因此，为了扩展原始问题，调整数组以处理元素观察的最有效方法是什么？

Answer 1

Array observe 观察数组变化!您还需要使用 Object.Observe 来观察 Array 中的每个对象!

看到这个

      function ObserveMyArray(myArray){
       var arr=myArray||[];
          for(var i=0;i<arr.length;i++){
            var item=arr[i];

        Object.observe(item , function(changes){

          changes.forEach(function(change) {
               console.log(change.type, change.name, change.oldValue);
           });

          });
         } 
       Array.observe(arr, function(changeRecords) {
         console.log('Array observe', changeRecords);
       });
        }