[RxJS] map vs flatMap
2015-09-07 19:32
645 查看
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.
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.
'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.
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).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()); });
相关文章推荐
- js 中的this
- js倒计时
- js时间转化为指定格式时间
- JavaScript语言精粹 笔记03 继承
- 未能加载文件或程序集 Newtonsoft.Json, Version=4.5.0.0 的报错,解决方法
- [RxJS] Stream Processing With RxJS vs Array Higher-Order Functions
- jsp乱码
- JSP脚本中的9个内置对象
- javascript内置对象Date以及(面试题--打印当前的日期,格式为yyyy-mm-dd hh:mm:ss
- $.ajax传递字符串到后台,后台返回json对象
- js 图片放大缩小(动画效果)
- JS性能优化
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- AJAX -- 通过JSON完成多形态的数据格式传送
- JavaScript变量及其作用域
- js中使用a标签onclick事件切换图片时显示异常解决办法
- jsp和servlet的区别
- jsp页面跳转,WEB-INF