如何获取RxJs中行为主体中更改的对象?

你的可观察发射阵列,你想知道当前发射阵列和前一个阵列之间的区别。跟踪数组状态的变化更多地涉及如何比较数组或对象,而不是观察值。

查看以下问题,开始学习:

• How to get the difference between two arrays in JavaScript?
• Comparing Arrays of Objects in JavaScript
• How to determine equality for two JavaScript objects?

您可以比较当前值 cv 到上一个 pv pairwise . 这是一个可能的样子。

const source = of(
  [{ name: "Mark", p: 2 }, { name: "Joe", p: 3 }],
  [{ name: "Jean Mark", p: 2 }, { name: "Joe", p: 3 }],
  [{ name: "Jean Mark", p: 1 }, { name: "Joe", p: 3 }, { name: 'Alice' }],
  [{ name: "Jean Mark", p: 1 }, { name: "Joe", p: 3 }],
  [{ name: "Jean Mark", p: 1 }, { name: "Joe", p: 4 }],
  [{ name: "Jean Mark", p: 1 }, { name: "Joe", p: 4 }]
);

// compare two objects
const objectsEqual = (o1, o2) =>
  typeof o1 === "object" && Object.keys(o1).length > 0
    ? Object.keys(o1).length === Object.keys(o2).length &&
      Object.keys(o1).every(p => objectsEqual(o1[p], o2[p]))
    : o1 === o2;

// compare two arrays 
// REPLACE this function with YOUR OWN LOGIC to get your desired output !!!
const difference = (prev, curr) => ({ 
  added: curr.filter(o1 => !prev.some(o2 => objectsEqual(o1, o2))),
  removed: prev.filter(o1 => !curr.some(o2 => objectsEqual(o1, o2)))
})

source.pipe(
  startWith([]), // used so that pairwise emits the first value immediately
  pairwise(), // emit previous and current value
  map(([pv, cv]) => difference(pv, cv)) // map to difference between pv and cv
).subscribe(console.log);

https://stackblitz.com/edit/rxjs-m9ngjy?file=index.ts

const handler = {
set: function(target, property, value, receiver){
   console.log('setting ' + property + ' for ' + target + ' with value ' + value);
   target[property] = value;
   return true;

  }
}


const arr=[{name: 'Mark'},{name: 'Joe'}];
const proxy = new Proxy(arr, handler);
// will log
proxy[0]="hello"
// won't log
proxy[0].name="ben"

如果您还想监视对象的更改,那么您需要为每个添加的对象使用代理,或者创建要添加的对象 Object.defineProperty()

还有一个现有的库可以监视对象和数组的变化,它还使用 proxy https://github.com/ElliotNB/observable-slim/