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:

var ary = [0,1,2,3,4];

var res = ary.reduce(function(preVal, item){
return preVal+item ;
}, 0); console.log(res); //

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.

[RxJS] Aggregating Streams With Reduce And Scan using RxJS的更多相关文章

  1. [RxJS] Combining streams in RxJS

    Source: Link We will looking some opreators for combining stream in RxJS: merge combineLatest withLa ...

  2. [RxJS] Sharing Streams with Share

    A stream will run with each new subscription added to it. This lesson shows the benefits of using sh ...

  3. [RxJS] Combining Streams with CombineLatest

    Two streams often need to work together to produce the values you’ll need. This lesson shows how to ...

  4. [RxJS] Toggle A Stream On And Off With RxJS

    This lesson covers how to toggle an observable on and off from another observable by showing how to ...

  5. [RxJS] Reactive Programming - Clear data while loading with RxJS startWith()

    In currently implemention, there is one problem, when the page load and click refresh button, the us ...

  6. [RxJS] Reactive Programming - Rendering on the DOM with RxJS

    <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery- ...

  7. [RxJS] Implement the `map` Operator from Scratch in RxJS

    While it's great to use the RxJS built-in operators, it's also important to realize you now have the ...

  8. [RxJS] Create a Reusable Operator from Scratch in RxJS

    With knowledge of extending Subscriber and using source.lift to connect a source to a subscriber, yo ...

  9. [RxJS] Reactive Programming - Using cached network data with RxJS -- withLatestFrom()

    So now we want to replace one user when we click the 'x' button. To do that, we want: 1. Get the cac ...

随机推荐

  1. Python 学习笔记(2) - 基本概念、运算符与表达式

    字符串 - 可以使用 3 种形式 - 单引号 :「'your string'」 - 双引号 :「"your string"」 - 三引号 :「'''your string''' 或 ...

  2. python 过滤html方法

    from HTMLParser import HTMLParser class MLStripper(HTMLParser): """ 过滤html方法 "&q ...

  3. QT变异版本下载(SJLJ长跳转,DWARF不传递错误(32位专用),SEH(64位专用)),以及QT的实验室项目

    http://www.tver-soft.org/ http://sourceforge.net/projects/qt64ng/ ---------------------------------- ...

  4. NHibernate 存储过程使用

    NHibernate也是能够操作存储过程的,不过第一次配置可能会碰到很多错误. 一.删除 首先,我们新建一个存储过程如下: CREATE PROC DeletePerson @Id int AS DE ...

  5. Linux学习笔记7——linux中的静态库和动态库

    一.静态库的编译 静态库的编译过程如下: 1.编译成目标文件 这里有一个可选项-static,调用格式:gcc -c -static 代码文件名.c 2.归档成静态库 A.归档的工具是ar工具,使用a ...

  6. Linux学习笔记5——虚拟内存

    一.为什么要有虚拟内存 虚拟内存的提出,是为了禁止用户直接访问物理存储设备,有助于系统稳定. 二.为什么一个程序不能访问另外一个程序的地址指向的空间 1:每个程序的开始地址0x80084000 2:程 ...

  7. DirectDraw

    一.DirectDraw接口 DirectDraw接口图如下: 1.IUnknown:所有COM对象都必须从这个基本接口派生 2.IDirectDraw:这是开始使用DirectDraw时必须创建的主 ...

  8. Linux下的各种软件安装方法汇总

    1 RPM包 1.1 安装 RPM包就像Windows的EXE安装文件一样,各种文件都已经编译好了,并进行了打包,哪一个文件应该放在哪一个目录下都指定好了,安装非常方便,在图形界面里你只需要双击就能自 ...

  9. Ubuntu系统下为IDEA创建启动图标

    默认情况下,ubuntu将自动安装的软件快捷方式保存在/usr/share/applications目录下,如果我们要创建桌面快捷方式,需要在该目录下创建一个名为“idea.desktop”的文件. ...

  10. HDOJ/HDU 1062 Text Reverse(字符串翻转~)

    Problem Description Ignatius likes to write words in reverse way. Given a single line of text which ...