[RxJS] Aggregating Streams With Reduce And Scan using RxJS
2015-09-07 19:50
567 查看
What is the RxJS equivalent of Array reduce? What if I want to emit my reduced or aggregated value at each event? This brief tutorial covers Observable operators reduce() and scan(), their differences and gotchas.
In ES5, the Array's reduce function works like this:
In RxJS, also has reduce function:
It gives the same result.
Let's do it async:
We will wait for 2.5 seconds until it gives result "10". This means the reduce() function in RxJS, it will not exec until the observable finihsed.
So if we just write:
And never finish it, we won't get result by reduce() funtion.
Use sacn() function instead of reduce() to get result each time:
when I run this, you'll see each time it ticks in, I get the next value, the next reduced value. One nice difference with scan though is, since it doesn't wait for completion, if I were to run this again, it's actually going to give me a result every time.
In ES5, the Array's reduce function works like this:
var ary = [0,1,2,3,4]; var res = ary.reduce(function(preVal, item){ return preVal+item ; }, 0); console.log(res); //10
In RxJS, also has reduce function:
It gives the same result.
var source = Rx.Observable.fromArray([0,1,2,3,4]); source.reduce(function(preVal, item){ return preVal+item ; }, 0).subscribe(function(res){ console.clear(); console.log(res); });
Let's do it async:
We will wait for 2.5 seconds until it gives result "10". This means the reduce() function in RxJS, it will not exec until the observable finihsed.
var source = Rx.Observable.interval(500).take(5); source.reduce(function(preVal, item){ return preVal+item ; }, 0).subscribe(function(res){ console.clear(); console.log(res); });
So if we just write:
var source = Rx.Observable.interval(500);
And never finish it, we won't get result by reduce() funtion.
Use sacn() function instead of reduce() to get result each time:
var source = Rx.Observable.interval(500).take(5); source.scan(0, function(preVal, item){ return preVal+item ; }).subscribe(function(res){ console.log(res); }); /* 0 1 3 6 10 */
when I run this, you'll see each time it ticks in, I get the next value, the next reduced value. One nice difference with scan though is, since it doesn't wait for completion, if I were to run this again, it's actually going to give me a result every time.
相关文章推荐
- js对象
- [RxJS] map vs flatMap
- 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事件切换图片时显示异常解决办法