A diferença entre switchMap e flatMap ou mergeMap

switchMap e mergeMap provavelmente vão ser os operadores mais poderosos e usados ​​com freqüência em seu arsenal. É, portanto, fundamental para entender a diferença entre os dois, a fim de gastar menos código de depuração no tempo. Ambos SwitchMap e mergeMap são usados ​​para achatar observables. MergeMap também é conhecido como flatMap, no entanto, ao longo deste artigo, estarei me referindo a ele como mergeMap.

http://reactivex.io/rxjs/

A maneira mais fácil de lembrar a diferença entre mergeMap e switchMap é

Quando você ouve a palavra merge, pense — todos os dados se fundindo. Considerando que quando você ouve a palavra switch, pense - mude para usar dados no fluxo mais recente

A diferença é sutil, mas ainda importante. Vamos demonstrar com alguns exemplos.

mergeMap

var outer = Rx.Observable.interval(1000).take(2);
var source = outer.mergeMap(function (x) {
  return Rx.Observable.interval(500).take(3).map(y => `${x}:${y}`)
});
source.subscribe(d => console.log(d));
Marble diagram
// Marble Diagram
/*
source: -0-------1|
          \       \
inner2:    \       0---1---2|  
            \
inner1:      0---1---2|
    mergeMap()
output: -----x---x-x-x-x---x|
*/

Há algumas coisas para lembrar aqui.

1) Estamos retornando um fluxo observável dentro de uma função de operador. Isso é exatamente o motivo pelo qual precisamos usar mergeMap (e, como veremos mais adiante, switchMap).
2) Dois fluxos internos estão emitindo dados simultaneamente. Um fluxo começa após o outro.
3) Os dados estão disponíveis na saída correspondente a CADA valor inserido em TODOS os fluxos internos. ou seja, nenhum dado é perdido.

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeMap

switchMap

var outer = Rx.Observable.interval(1000).take(2);
var source = outer.switchMap(function (x) {
  return Rx.Observable.interval(500).take(3).map(y => `${x}:${y}`)
});
source.subscribe(d => console.log(d));
Marble diagram
// Marble Diagram
/*
source: -0-------1|
          \       \
inner2:    \       0---1---2|  
            \
inner1:      0---1---2|
    switchMap()
output: -----x-----x---x---x|
*/

Observe como a saída possui muito menos pontos de dados. Isso porque o momento em que o fluxo inner2 ficou disponível, a saída já não escuta dados de inner1. SwitchMap efetivamente passa para inner2.

Isso também implica que mesmo que os fluxos internos possam estar produzindo dados simultaneamente no switchMap, a saída é determinada somente pelo mais recente, que ainda está produzindo dados.

Espero que isso simplifique sua compreensão sobre esses dois operadores.

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap

Veja um exemplo de código rodando na codepen, para ver o resultado aperte F12 o observe a saída no console.

Veja também

Vazamento de memória com RxJS Observables

Operadores RxJS que você deve conhecer

Understanding mergeMap and switchMap in RxJS

Learn Reactive Programming

Recomendação de leitura

Build Reactive WebSites with RxJS

Reactive Programming with RxJS 5: Untangle Your Asynchronous JavaScript Code

Quanto mais melhor