[RxJS] Stream Processing With RxJS vs Array Higher-Order Functions
Higher order Array functions such as filter, map and reduce are great for functional programming, but they can incur performance problems.
var ary = [1,2,3,4,5,6]; var res = ary.filter(function(x, i, arr){ console.log("filter: " + x); console.log("create new array: " + (arr === ary)); return x%2==0; }) .map(function(x, i, arr){ console.log("map: " + x); return x+"!"; }) .reduce(function(r, x, i, arr){ console.log("reduce: " + x); return r+x; }); console.log(res); /* "filter: 1" "create new array: true" "filter: 2" "create new array: true" "filter: 3" "create new array: true" "filter: 4" "create new array: true" "filter: 5" "create new array: true" "filter: 6" "create new array: true" "map: 2" "map: 4" "map: 6" "reduce: 4!" "reduce: 6!" "2!4!6!" */
In the example, filter & map function will return a new array. That's good because it pushes forward the idea of immutability. However, it's bad because that means I'm allocating a new array. I'm iterating over it only once, and then I've got to garbage-collect it later. This could get really expensive if you're dealing with very large source arrays or you're doing this quite often.
Using RxJS:
var source = Rx.Observable.fromArray([1,2,3,4,5,6]); source.filter(function(x){ console.log("filter: " + x); return x%2==0; }) .map(function(x){ console.log("map: " + x); return x+"!"; }) .reduce(function(r, x){ console.log("reduce: " + x); return r+x; }).subscribe(function(res){ console.log(res); });
/* "filter: 1" "filter: 2" "map: 2" "filter: 3" "filter: 4" "map: 4" "reduce: 4!" "filter: 5" "filter: 6" "map: 6" "reduce: 6!" "2!4!6!" */
The biggest thing is that now you'll see it goes through each -- the filter, the map, and the reduce -- at each step.
Differences:
The first example: it creates two intermediary arrays (during filter and map). Those arrays needed to be iterated over each time, and now they'll also have to be garbage-collected.
The RxJS example: it takes every item all the way through to the end without creating any intermediary arrays.
相关文章
- 行存储 VS 列存储
- 一秒钟阅读 VS Code 阅读 GitHub 代码
- 无效学习 VS 有效学习 (2)
- Vs Code报错vue/multi-word-component-names
- 付费版 VS Code?脑瓜子嗡嗡的吧!
- 【搜索引擎选型】Solr vs. Elasticsearch:怎么选?
- ArrayList vs LinkedList 空间占用详解编程语言
- VS开发在Linux上的体验(vs开发linux)
- i5-11400H VS.锐龙7 5800H大战17款单机游戏:Intel赢13款
- 比较:Oracle标准版 vs 企业版(oracle标准版企业版)
- VS 2013与MySQL的结合:强大的数据库解决方案(vs2013mysql)
- 为什么人工智能企业VS安防巨头,已成过去时?丨2019中国人工智能安防峰会
- VS中使用MySQL:获取最佳性能(vs和mysql)
- VS联与SQL Server 配合协作,让工作更轻松。(vs联sqlserver)
- VS中SQL Server的完美遇见(vs中sqlserver)
- VS MSSQL:强势对抗,谁为佳?(vs mssql)
- 语句Oracle中简洁的With语句(oracle 中with)
- 比较C和MySQL 略显不均之下的选择(c++ mysql vs)
- 极速存取内存 vs Redis(直接存在内存和redis)
- 比较VS Code使用Redis管理数据(vs使用redis)
- 比较VS Redis教程,学习新技能(vs redis教程)
- 研究 VS C 如何从 Redis 中读取数据(vs c 读取redis)
- 分析学习Oracle深入理解使用With 分析(oracle使用with)
- VS操作Redis 简单而不繁琐(在vs操作redis)
- VS中如何优雅地操作Redis(vs操作redis)
- 从Oracle中挖掘洞见坚实的With表(oracle with表)
- Oracle与VS插件的竞技之战(oracle vs插件)