zoukankan      html  css  js  c++  java
  • [RxJS] map vs flatMap

    What's the difference between map and flatmap? First, let's show what map is. To show that, I need a source stream, so I'm going to make an interval. It takes a tenth of a second, and I'm only going to take 10 values, and subscribe to it.

    var source = Rx.Observable.interval(100).take(10).map((x) => x*2);
    console.clear();
    source.subscribe(function(res){
      console.log(res);
    });
    
    /*
    0
    2
    4
    6
    8
    10
    12
    14
    16
    18
    */

    But what happens if I want to do something asynchronous in here? To show this, I'm going to return an observable timer, which is just going to wait for half of a second, and then map to exactly the same values.

    var source = 
        Rx.Observable.interval(100).take(10)
        .map(function(x){
          return Rx.Observable.timer(100).map(function(){
            return x;
          });
        });
    console.clear();
    source.subscribe(function(res){
      console.log(res.toString());
    });
    
    /*
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    */

    'Rx.Observable.timer(100)' causes it delay 100 ms.

    You find You're going to get objects back. That's because these objects are observables. I'd really, really like to get my values back into my stream. There's actually two ways to do this. 

    First Way: mergerAll()

    What a merge all does is, it takes in a stream of observables, or an observable of observables, and merges them together as they come in.

    It subscribes to each one, and pumps them into one output stream. 

    var source = 
        Rx.Observable.interval(100).take(10)
        .map(function(x){
          return Rx.Observable.timer(100).map(function(){
            return x;
          });
        }).mergeAll();
    console.clear();
    source.subscribe(function(res){
      console.log(res.toString());
    });
    
    /*
    "0"
    "1"
    "2"
    "3"
    "4"
    "5"
    "6"
    "7"
    "8"
    "9"
    */

    Second way: flatMap()

    What flatmap is going to do is it's going to perform this mapping function and then subscribe to each observable returned by the map.

    var source = 
        Rx.Observable.interval(100).take(10)
        .flatMap(function(x){
          return Rx.Observable.timer(100).map(function(){
            return x;
          });
        });
    console.clear();
    source.subscribe(function(res){
      console.log(res.toString());
    });
  • 相关阅读:
    主进程与渲染进程的异同
    Electron node integration enabled 设置
    JS-函数总结
    JS-变量、作用域、垃圾回收机制总结
    python进阶知识笔记
    高级抽象函数
    mac支持的文件系统
    生成器generator & 迭代器iterator
    磁盘如何做才能让系统识别
    winPE盘能做什么
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4789763.html
Copyright © 2011-2022 走看看