RxJS仅从数组中获取已更改的对象

const { fromEvent } = rxjs;
const { scan, distinctUntilChanged, map } = rxjs.operators;

// 初始数组
let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

// 创建一个可观察对象来监听数组的变化
const items$ = fromEvent(document, 'arrayChange').pipe(
  scan((acc, newValue) => {
    // 合并新值到累加器中
    return [...acc, ...newValue];
  }, items),
  distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),
  map(changedItems => changedItems.filter((item, index, self) =>
    index === self.findIndex(t => t.id === item.id)
  ))
);

// 订阅可观察对象以获取更改的对象
items$.subscribe(changedItems => {
  console.log('Changed items:', changedItems);
});

// 模拟数组变化
setTimeout(() => {
  const newItems = [
    { id: 1, name: 'Item 1 Updated' },
    { id: 4, name: 'Item 4' }
  ];
  const event = new Event('arrayChange');
  document.dispatchEvent(event);
}, 1000);