javascript - 如何将多个键与 distinctUntilKeyChanged 进行比较？

Question

我仍在学习 rxjs，我对如何为运算符 distinctUntilChanged 编写自定义比较函数有些困惑。

我研究了使用 distinctUntilKeyChanged，它对单个键非常有效...但是我有两个键需要比较。

看来我可能需要结合扫描运算符来比较当前发出的值和最后发出的值....？

好的，这是我的代码。我正在流式传输来自谷歌地图的 map 中心更改。我不需要 map 中心 GeoLocation 非常精确，所以我四舍五入了谷歌地图返回的大部分小数。

searchStream$
  .map((value)=>{
  return {
    lat: round(value[1].lat, 1),
    lng: round(value[1].lng, 1)
  }
}).distinctUntilKeyChanged('lat')
  .do((position)=>{console.log(position)})
  .subscribe((position)=>{ this._store.dispatch(new QueryUpdateGeoPositionAPIAction({latitude: position.lat, longitude: position.lng})) });

回到我的问题，我如何比较这两个属性(纬度和经度)以确保它仅在其中一个值发生变化时才发出值？

感谢您的帮助!

Answer 1

我遇到了同样的问题，文档中没有涵盖这种情况。

这将添加 .distinctUntilKeysChanged 运算符。只需将任何键传递给它即可“观看”

const {
  Observable,
  Subject
} = Rx;

Observable.prototype.distinctUntilKeysChanged = function(...keys) {
  return this.distinctUntilChanged((old, current) =>
    // if no value changed,
    // the array will only have true values,
    // includes(false) will be false,
    // convert to oposite (!),
    // returns true;
    // => true = do nothing

    // if any value changed,
    // the array will include some false,
    // includes(false) will be true,
    // convert to oposite (!),
    // returns false;
    // => false = emit

    !keys
    .map(key => old[key] === current[key]) // converts to array of boolean
    .includes(false) // if any value changed
  );
};

const stream = new Subject();

stream
  .distinctUntilKeysChanged('prop', 'prop2')
  .subscribe(obj => console.log(obj));

// should log
stream.next({
  prop: 42,
  prop2: 54,
});

// should log
stream.next({
  prop: 12346,
  prop2: 54,
});

// shouldn't log because neither prop nor prop2 changed
stream.next({
  prop: 12346,
  prop2: 54,
});

// should log
stream.next({
  prop: 12346,
  prop2: 5454665654645,
});

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

唯一的缺点是您不能指定自定义比较函数。如果你确实想指定一个，你可以使用它来代替(这更类似于 .distinctUntilKeyChanged 的实现，其中第一个参数是键，第二个是比较函数)。请注意，这个接受一个键数组，其中第一个接受键作为单独的参数

const {
  Observable,
  Subject
} = Rx;

Observable.prototype.distinctUntilKeysChanged = function(keys, compare) {
  return this.distinctUntilChanged((old, current) =>
    // if no value changed,
    // the array will only have true values,
    // includes(false) will be false,
    // convert to oposite (!),
    // returns true;
    // => true = do nothing

    // if any value changed,
    // the array will include some false,
    // includes(false) will be true,
    // convert to oposite (!),
    // returns false;
    // => false = emit

    !keys
    .map(key => compare ? compare(old[key], current[key]) : old[key] === current[key]) // converts to array of boolean
    .includes(false) // if any value changed
  );
};

const stream = new Subject();

stream
  .distinctUntilKeysChanged(['prop', 'prop2'])
  .subscribe(obj => console.log(obj));

// should log
stream.next({
  prop: 42,
  prop2: 54,
});

// should log
stream.next({
  prop: 12346,
  prop2: 54,
});

// shouldn't log because neither prop nor prop2 changed
stream.next({
  prop: 12346,
  prop2: 54,
});

// should log
stream.next({
  prop: 12346,
  prop2: 5454665654645,
});

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

希望你觉得有用