First thing need to understand is, Reactive programming is dealing with the event stream.

Event streams happens overtime, which not stay in the memory.

For example, the array we have:

var source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'];

Which is stay in the momery.

But the stream we have:

let logic = Rx.Observable.interval(400).take(9)
.map( (i) => {
let val = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'][i]
return parseInt(val, 10);
})

Which happens overtime, every 400ms it return an Interge if possible.

So the main difference between array stay in memory and the events streams is array already stay in memory and the streams happens overtime.

But the nice things about the stream is we can still use the methods we have for array:

let logic = Rx.Observable.interval(400).take(9)
.map( (i) => {
let val = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'][i]
return parseInt(val, 10);
})
.filter( (number) => {
return !isNaN(number)
})
.reduce( (acc, y) => {
return acc + y;
} ); let effect = logic.subscribe( (number) => {
console.log(number);
});

[RxJS] Reactive Programming - What is RxJS?的更多相关文章

  1. [RxJS] Reactive Programming - Why choose RxJS?

    RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a ...

  2. [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 ...

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

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

  4. [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 ...

  5. [RxJS] Reactive Programming - Sharing network requests with shareReplay()

    Currently we show three users in the list, it actually do three time network request, we can verfiy ...

  6. [RxJS] Reactive Programming - New requests from refresh clicks -- merge()

    Now we want each time we click refresh button, we will get new group of users. So we need to get the ...

  7. [Reactive Programming] RxJS dynamic behavior

    This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm fo ...

  8. .Net中的反应式编程(Reactive Programming)

    系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LI ...

  9. [Reactive Programming] Using an event stream of double clicks -- buffer()

    See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect doubl ...

随机推荐

  1. [WebStrom] Cannot detect file change to trigger webpack re-compile

    Working with editors/IDEs supporting “safe write” Note that many editors support “safe write” featur ...

  2. mysql 中的数据类型

    unsigned   既为非负数,用此类型可以增加数据长度! 例如如果    tinyint最大是127,那    tinyint    unsigned    最大   就可以到    127 * ...

  3. javascript 获取滚动条高度+常用js页面宽度与高度(转)

    /******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(d ...

  4. oracle数据库事务相关【weber出品必属精品】

    事务的概念:事务:一个事务由一组构成一个逻辑操作的DML语句组成 事务有开始有结束,事务以DML语句开始,以Conmmit和Rollback结束.以下情况会使得事务结束: 1. 执行COMMIT 或者 ...

  5. css 文本域textarea显示成label标签

    <html> <head>     <title>textarea显示为label</title> <style type="text/ ...

  6. Jquery函数实现时间显示模式为更新于+被当前时间减去后剩余的时间值(例如:更新于三小时前)的处理。

    var time_eles = $(".time_tranfer"); for(var i =0; i < time_eles.length;i++){ var time_e ...

  7. 清空文本框SetDlgItemText(IDC_TXTXT,NULL);

    清空文本框 SetDlgItemText(IDC_TXTXT,NULL);

  8. C++新式类型转换

    C++的四种强制类型转换,所以C++不是类型安全的.分别为:static_cast , dynamic_cast , const_cast , reinterpret_cast 新类型的强制转换可以提 ...

  9. 图文-水平垂直居中兼容ie6+

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  10. Ftp不能登陆的解决方法

    ftp登陆不了是很经常碰到的事,很多人常常是不加分析就发贴询问.老实说,这样既浪费自己时间,又浪费别人精力,还常常不能得到满意的回答.因此每一位希望从ftp站点发现资源的朋友都有必要学会分析登陆失败的 ...