Почему мы должны использовать flatMap?

['a','b','c'].flatMap(function(e) {
    return [e, e+ 'x', e+ 'y',  e+ 'z'  ];
});
//['a', 'ax', 'ay', 'az', 'b', 'bx', 'by', 'bz', 'c', 'cx', 'cy', 'cz']


['a','b','c'].map(function(e) {
    return [e, e+ 'x', e+ 'y',  e+ 'z'  ];
});
//[Array[4], Array[4], Array[4]]

вы используете flatMap, когда у вас есть наблюдаемый, результаты которого более заметны.

если у вас есть наблюдаемое, которое создается другим наблюдаемым, вы не можете фильтровать, уменьшать или сопоставлять его напрямую, потому что у вас есть наблюдаемые не данные. Если вы создаете наблюдаемый выбор flatMap над картой; тогда вы в порядке.

как и во втором фрагменте, если вы делаете асинхронную операцию, которую вам нужно использовать flatMap.

var source = Rx.Observable.interval(100).take(10).map(function(num){
    return num+1
});
source.subscribe(function(e){
    console.log(e)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>

var source = Rx.Observable.interval(100).take(10).flatMap(function(num){
    return Rx.Observable.timer(100).map(() => num)
});
source.subscribe(function(e){
    console.log(e)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.min.js"></script>

flatMap преобразует элементы, испускаемые наблюдаемым в новые наблюдаемые, а затем сглаживает выбросы от них в один наблюдаемый.

Проверьте сценарий ниже, где get("posts") возвращает наблюдаемое, которое "сплющено" с помощью flatMap.

myObservable.map(e => get("posts")).subscribe(o => console.log(o));
// this would log Observable objects to console.  

myObservable.flatMap(e => get("posts")).subscribe(o => console.log(o));
// this would log posts to console.

Это не массив массивов. Это наблюдаемое из наблюдаемых(ов).

следующее возвращает наблюдаемый поток строки.

requestStream
  .map(function(requestUrl) {
    return requestUrl;
  });

В то время как это возвращает наблюдаемый поток наблюдаемого потока json

requestStream
  .map(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

flatMap сглаживает наблюдаемое автоматически для нас, чтобы мы могли наблюдать поток json напрямую

наблюдаемый-это объект, который испускает поток событий: Next, Error и Completed.

когда ваша функция возвращает Observable, она возвращает не поток, а экземпляр Observable. Элемент flatMap оператор просто сопоставляет этот экземпляр потоку.

это поведение flatMap по сравнению с map: выполните данную функцию и сгладьте полученный объект в поток.

просто:

[1,2,3].map(x => [x, x * 10])
// [[1, 10], [2, 20], [3, 30]]

[1,2,3].flatMap(x => [x, x * 10])
// [1, 10, 2, 20, 3, 30]]

люди склонны усложнять вещи дать определение, которое говорит:

flatMap преобразует элементы, излучаемые наблюдаемым в Наблюдаемые, затем сглаживают выбросы от них в один Наблюдаемый

клянусь, это определение все еще смущает меня, но я собираюсь объяснить его самым простым способом, который заключается в использовании примера

В Нашей Ситуации: у нас есть наблюдаемый, который возвращает данные (простой URL), которые мы собираемся использовать для выполнения HTTP-вызова, который вернет наблюдаемый, содержащий необходимые нам данные, чтобы вы могли визуализировать ситуацию следующим образом:

Observable 1
    |_
       Make Http Call Using Observable 1 Data (returns Observable_2)
            |_
               The Data We Need

так как вы можете видеть, что мы не можем получить данные, которые нам нужны напрямую, поэтому первый способ получения данных мы можем использовать только обычные подписки, такие как:

Observable_1.subscribe((URL) => {
         Http.get(URL).subscribe((Data_We_Need) => {
                  console.log(Data_We_Need);
          });
});

это работает, но, как вы можете видеть, мы должны вложить подписки, чтобы получить наши данные это в настоящее время не выглядит плохо, но представьте, что у нас есть 10 вложенные подписки, которые станут недоступными.

поэтому лучший способ справиться с этим-просто использовать оператор flatMap который будет делать то же самое, но заставляет нас избегать, что вложенные подписки:

Observable_1
    .flatMap(URL => Http.get(URL))
    .subscribe(Data_We_Need => console.log(Data_We_Need));

С flatMap

var requestStream = Rx.Observable.just('https://api.github.com/users');

var responseMetastream = requestStream
  .flatMap(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

responseMetastream.subscribe(json => {console.log(json)})

без flatMap

var requestStream = Rx.Observable.just('https://api.github.com/users');

var responseMetastream = requestStream
  .map(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

responseMetastream.subscribe(jsonStream => {
  jsonStream.subscribe(json => {console.log(json)})
})

здесь, чтобы показать эквивалентную реализацию flatMap с помощью подписывается.

без flatMap:

this.searchField.valueChanges.debounceTime(400)
.subscribe(
  term => this.searchService.search(term)
  .subscribe( results => {
      console.log(results);  
      this.result = results;
    }
  );
);

С flatMap:

this.searchField.valueChanges.debounceTime(400)
    .flatMap(term => this.searchService.search(term))
    .subscribe(results => {
      console.log(results);
      this.result = results;
    });

http://plnkr.co/edit/BHGmEcdS5eQGX703eRRE?p=preview

надеюсь, что это может помочь.

Оливье.