RxJS distinctUntilChanged - 对象比较

Question

我有一个对象流，我需要比较当前对象是否与前一个对象不同，在这种情况下会发出一个新值。我发现 distinctUntilChanged 操作符应该完全符合我的要求，但由于某种原因，它永远不会发出除第一个值之外的值。如果我删除 distinctUntilChanged 值会正常发出。

我的代码：

export class SettingsPage {
    static get parameters() {
        return [[NavController], [UserProvider]];
    }

    constructor(nav, user) {
        this.nav = nav;
        this._user = user;

        this.typeChangeStream = new Subject();
        this.notifications = {};
    }

    ngOnInit() {

        this.typeChangeStream
            .map(x => {console.log('value on way to distinct', x); return x;})
            .distinctUntilChanged(x => JSON.stringify(x))
            .subscribe(settings => {
                console.log('typeChangeStream', settings);
                this._user.setNotificationSettings(settings);
            });
    }

    toggleType() {
        this.typeChangeStream.next({
            "sound": true,
            "vibrate": false,
            "badge": false,
            "types": {
                "newDeals": true,
                "nearDeals": true,
                "tematicDeals": false,
                "infoWarnings": false,
                "expireDeals": true
            }
        });
    }

    emitDifferent() {
        this.typeChangeStream.next({
            "sound": false,
            "vibrate": false,
            "badge": false,
            "types": {
                "newDeals": false,
                "nearDeals": false,
                "tematicDeals": false,
                "infoWarnings": false,
                "expireDeals": false
            }
        });
    }
}

Answer 1

我遇到了同样的问题，并通过使用 JSON.stringify 来比较对象来修复它：

.distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))

如果属性顺序相同，则此代码将起作用，否则可能会中断，因此这里有一个快速修复（注意此方法较慢）

.distinctUntilChanged((a, b) => JSON.stringify(a).split('').sort().join('') === JSON.stringify(b).split('').sort().join(''))

Answer 2

当你的应用程序中有 lodash 时，你可以简单地使用 lodash 的 isEqual() 函数，它会进行深度比较并完美匹配 distinctUntilChanged() 的签名：

.distinctUntilChanged(isEqual),

或者，如果您有 _ 可用（现在不再推荐）：

.distinctUntilChanged(_.isEqual),

Answer 3

我终于知道问题出在哪里了。问题出在 RxJS 版本中，在 V4 及更早版本中，参数顺序与 V5 不同。

RxJS 4：

distinctUntilChanged = 函数（keyFn，比较器）

RxJS 5：

distinctUntilChanged = 函数（比较器，keyFn）

在今天的每个文档中，您都可以找到 V4 参数顺序，请注意！

Answer 4

你也可以包装原来的distinctUntilChanged函数。

function distinctUntilChangedObj<T>() {
  return distinctUntilChanged<T>((a, b) => JSON.stringify(a) === JSON.stringify(b));
}

这让您可以像使用原版一样使用它。

$myObservable.pipe(
  distinctUntilChangedObj()
)

告诫

正如一些评论者指出的那样，这种方法也有几个缺陷。

1. 如果对象字段的顺序不同，这将失败；

JSON.stringify({a:1, b:2}) === JSON.stringify({b:2, a:1})
// will return false :(

1. 如果对象有循环引用，这个JSON.stringify 也会抛出错误。例如，对 firebase sdk 中的内容进行字符串化会导致出现以下错误：

TypeError: Converting circular structure to JSON

稳健的解决方案

使用deep-object-diff 库而不是JSON.stringify。这样就解决了上面的问题?

import { detailedDiff } from 'deep-object-diff';

function isSame(a, b) {
  const result = detailedDiff(a, b); 
  const areSame = Object.values(result)
    .every((obj) => Object.keys(obj).length === 0);
  return areSame;
}

function distinctUntilChangedObj<T>() {
  return distinctUntilChanged<T>((a, b) => isSame(a, b));
}

Answer 5

来自 RxJS v6+ 有 distinctUntilKeyChanged

https://www.learnrxjs.io/operators/filtering/distinctuntilkeychanged.html

const source$ = from([
  { name: 'Brian' },
  { name: 'Joe' },
  { name: 'Joe' },
  { name: 'Sue' }
]);

source$
  // custom compare based on name property
  .pipe(distinctUntilKeyChanged('name'))
  // output: { name: 'Brian }, { name: 'Joe' }, { name: 'Sue' }
  .subscribe(console.log);

Answer 6

Mehdi 的解决方案虽然速度很快，但如果不维护订单就无法工作。使用deep-equal 或fast-deep-equal 库之一：

.distinctUntilChanged((a, b) => deepEqual(a, b))

Answer 7

如果 observable 实际上发出同一对象的修改版本，则建议进行深度比较的答案都会失败，因为传递给比较的“最后”值将与当前，每次。

我们使用 BehaviorSubject 解决了这个问题，碰巧每次都将同一个对象传递给 .next()。

在这种情况下，无论你使用什么比较函数，都没有使用默认 distinctUntilChanged 的​​解决方案。

Answer 8

您也可以制作自己的过滤器：

function compareObjects(a: any, b: any): boolean {
  return JSON.stringify(a) === JSON.stringify(b);
}

export function distinctUntilChangedObject() {
  return function<T>(source: Observable<T>): Observable<T> {
    return new Observable(subscriber => {
      let prev: any;
      let first = true;
      source.subscribe({
        next(value) {
          if (first) {
            prev = value;
            subscriber.next(value);
            first = false;
          } else if (!compareObjects(prev, value)) {
            prev = value;
            subscriber.next(value);
          }
        },
        error(error) {
          subscriber.error(error);
        },
        complete() {
          subscriber.complete();
        }
      });
    });
  };
}

Answer 9

如果您可变地更改该值，则其他答案都不起作用。如果你需要使用可变数据结构，你可以使用 distinctUntilChangedImmutable，它会深度复制之前的值，如果没有传入比较函数，则会断言之前的值和当前值深度相等彼此（不是 === 断言）。