[RxJS] Filtering operators: distinct and distinctUntilChanged

Posted 2020-07-17 Answer1215

Operator distinct() and its variants are an important type of Filtering operator. This lessons shows how they work and in what cases are they useful.

 

distinctUntilChanged():

var foo = Rx.Observable.interval(500).take(5)
  .zip(Rx.Observable.of(‘a‘,‘b‘,‘a‘,‘a‘,‘b‘), (x,y)=>y);

/*
--a--b--a--a--b|
   distinctUntilChanged
--a--b--a-----b|
*/

var result = foo.distinctUntilChanged();

result.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);

 

distinct(comparFn, flushFn):

var foo = Rx.Observable.interval(500).take(5)
  .zip(Rx.Observable.of(‘a‘,‘b‘,‘a‘,‘a‘,‘b‘), (x,y)=>y);

/*
--a--b--a--a--b|
   distinct
--a--b---------|
*/

var result = foo.distinct();

result.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);
  
  /*
"next a"
"next b"
"done"  
  */

 

With CamperFn():

var foo = Rx.Observable.interval(500).take(5)
  .zip(Rx.Observable.of(‘a‘,‘b‘,‘a‘,‘A‘,‘b‘), (x,y)=>y);


var comparFn = (x, y) => {
  return x.toLowerCase() === y.toLowerCase();
}

/*
--a--b--a--A--b|
   distinct
--a--b---------|
*/

var result = foo.distinct(comparFn);

result.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);
  
  /*
"next a"
"next b"
"done"  
  */

 

with FlusherFn:

var foo = Rx.Observable.interval(500).take(5)
  .zip(Rx.Observable.of(‘a‘,‘b‘,‘a‘,‘A‘,‘b‘), (x,y)=>y);


var comparFn = (x, y) => {
  return x.toLowerCase() === y.toLowerCase();
}


var flushFn = Rx.Observable.interval(1100).take(1)
  .concat(Rx.Observable.never());

/*
--a--b--a--A--b|
-------0--------
   distinct(comparFn, flushFn)
--a--b--a-----b|
*/

var result = foo.distinct(comparFn, flushFn);

result.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);
  
  /*
"next a"
"next b"
"next a"
"next b"
"done" 
  */