RxJS API解析(四)
Rx*(Observable.combineLatest)方法
方法定义
Rx.Observable.combineLatest(...args, [resultSelector])
作用
通过处理函数总是将指定的可观察对象序列中最新发射的值合并为一个可观察对象。
参数
args
(arguments | Array): 一系列可观察对象或可观察对象的数组。[resultSelector]
(Function
): 在所有可观察对象都发射值后调用的处理函数。
返回值
(Observable
): 由传入的可观察序列经过处理函数合并后的结果组成的可观察序列。
宝珠图
Observable.combineLastest()
函数,总是合并序列中最新发射的值。宝珠图中的颜色球发射颜色,空白的图形发射待染色图形,处理函数对待染色对象进行染色:总是用户最新发射的颜色或者对最新发射的待染色对象。
假设颜色序列仅发射了第一个宝珠浅紫色且后续不再发射,那么结果街将会是一个由浅紫色组成的染色后对象的序列。
使用官方可拖动宝珠图,可以帮助理解,拖动序列中的宝珠,观察输出序列的变化。
实例
var colors = ["紫色","黄色","蓝色","黑色"];
var shapes = ["小星星","圆形","三角形","正方形","心形","五边形"];
var source1 = Rx.Observable.interval(3000).map(()=>colors.pop());
var source2 = Rx.Observable.interval(2000).map(()=>shapes.pop());var combined = Rx.Observable.combineLatest(source1, source2, function(x, y){return x + "的" + y;
}).take(8);combined.subscribe((shaped)=>console.log(shaped));
实例模拟第一个宝珠图,点击进入可运行实例。其中列1发射颜色值,序列2发射形状。结果输出染色后的形状:
"黑色的五边形"
"黑色的心形"
"蓝色的心形"
"蓝色的正方形"
"蓝色的三角形"
"黄色的三角形"
"黄色的圆形"
"紫色的圆形"
还有一个非常好的实例在前面的文章中,是combineLatest()
在缓存数据方面的应用,如果你想深入理解combineLatest()
不妨看一下。
题外话
写这个专题的时候,对Rx
的抽象能力赞叹不已。
大家通常把编写一个框架的工作称作“造轮子”。
“轮子”是一个针对某一类问题的解决方案,通常是由于反复解决某一个工程问题而产生的。某种程度上,轮子可以一劳永逸,同时轮子的使用可以大大地提高生产的效率(试想想你在使用如Rails
这类有 ORM特性框架时的感受)。
Rx
似乎从另一个方面而不是实际问题进行抽象——数学,是一个函数式编程模式。从数学而不是工程作为起点,创造的工具的威力_可能_更强大,但是学习成本(使用成本)_可能_会更高。
任何程序设计语言在讲解递归特性时,基本都会举汉诺塔
、斐波拉契数列
的例子。没错,请你对比一下斐波拉契数列
和combineLatest()
定义的相似之处:
def fibo(i): if i==0 or i==1: return 1 else: return fibo(i-1)+fibo(i-2)
Oops!递归完成后产生值的过程就是combineLatest()
的过程。
在学习Rx
的操作符时,请反复地理解操作符的作用、限制。最好的理解方法是构建一个场景。
在combineLatest()
中,我们不妨将场景限定为拥有两个可观察对象的可观察序列
,并且对象A
总是较低频率地发射新值,而对象B
比较频繁地发射:
A ----*----------------*---------->
B -----@---@---@---@---@----@----->
那么对象A
在实际中可能是什么?缓存后的http
请求后的数据、异步获取的配置文件...
对象B
自然可以是,与服务器的实时同步、用户上传图片的实时上传、用户在列表中执行的翻页操作...
前面的文章中缓存Github用户的就是上面提到的场景。
剧终
RxJS API解析(四)相关推荐
- 【Rxjs】 - 解析四种主题Subject
原文地址: https://segmentfault.com/a/1190000012669794 引言 开发ngx(angular 2+)应用时,基本上到处都会用到rxjs来处理异步请求,事件调用等 ...
- JavaScript 对象所有API解析【2020版】
写于 2017年08月20日,虽然是2017年写的文章,但现在即将2020年依旧不过时,现在补充了2019年新增的ES10 Object.fromEntries().发到公众号申明原创.若川顺便在此提 ...
- java微信开发API解析(二)-获取消息和回复消息
java微信开发API解析(二)-获取消息和回复消息 说明 * 本演示样例依据微信开发文档:http://mp.weixin.qq.com/wiki/home/index.html最新版(4/3/20 ...
- 微信个性化菜单 java_java微信开发API第四步 微信自定义个性化菜单实现
微信如何实现自定义个性化菜单,下面为大家介绍 一.全局说明 详细说明请参考前两篇文章. 二.本文说明 本文分为五部分: * 工具类AccessTokenUtils的封装 * 自定义菜单和个性化菜单文档 ...
- React16常用api解析以及原理剖析
React16常用api解析以及原理剖析 目录 Vue 与 React 两个框架的粗略区别对比 react 16 版本常见 api react 生命周期 react 事件机制 react.Compon ...
- knockoutjs ajax分页,KnockoutJS 3.X API 第四章之数据控制流foreach绑定
foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM- ...
- RxJS的另外四种实现方式(一)——代码最小的库
2019独角兽企业重金招聘Python工程师标准>>> 接上篇RxJS的另外四种实现方式(序) 起因 想到这个库的原因,是看了callbag库想到的,callbag库的原理大家可以自 ...
- Java 调用Google Map Api解析地址,解析经纬度实例
Java 调用Google Map Api解析地址,解析经纬度实例 使用google地图的反向地址解析功能,提供一个经纬度得到对应地址,或者给出模糊地址,得到经纬度,放在java后台代码中处理,这个使 ...
- 使用 MediaExtractor 和 MediaMuxer API 解析和封装 mp4 文件
一个音视频文件是由音频和视频组成的,我们可以通过MediaExtractor.MediaMuxer把音频或视频给单独抽取出来,抽取出来的音频和视频能单独播放: 一.MediaExtractor API ...
最新文章
- 前列腺癌检测 AI 算法登上《柳叶刀》:分类性能超过人类专家,还能完成其他临床任务...
- Linux软件安装-----apache安装
- 改善企业互联网安全性的方法—Vecloud微云
- QCustomplot几种清理曲线数据方法
- zz数字图像的结课报告
- 请谈下Android消息机制,复习指南
- 30款顶级CSS工具及应用-CSDN.NET
- 接口和抽象类有什么区别?
- ConvolverNode
- 图论之二分图-HihoCoder1121
- 程序员过关斩将--你的业务是可变的吗
- PYTHON开发毕业设计做什么好鸭?
- WMS系统(二)盘点之“核对库存”
- 仿爱奇艺加载dialog
- 成都电子科技大学深圳校区计算机学院导师简介
- 【综述】近年来NLP在法律领域的相关研究工作
- c语言整数各位数字求和
- ldd3学习之七:中断处理
- 9月书讯(上)| 开学季,读新书
- linux网桥简单理解和持久化配置