《深入浅出RxJS》 (4)

会对其内部的Observable对象做concat操作

const ho$ = Observable.interval(1000) .take(2) .map(x => Observable.interval(1500).map(y => x+':'+y).take(2)); const concated$ = ho$.concatAll(); // 0:0 0:1 1:0 1:1

concatAll首先会订阅上游产生的第一个内部的Observable对象,抽取其中的数据,然后只有当第一个Observable完结的时候才回去订阅第二个Observable。这样很容易产生数据积压

mergeAll

和concatAll()功能类似,但是只要上游产生了数据,mergeAll就会立即订阅

switch

switch的含义就是切换,总是切换到最新的内部Observable对象获取数据。每当switch的上游高阶Observable产生一个内部Observable对象,witch都会⽴刻订阅最新的内部Observable对象上, 如果已经订阅了之前的内部Observable对象, 就会退订那个过时的内部Observable对象, 这个“⽤上新的, 舍弃旧的”动作, 就是切换。

const ho$ = Observable.interval(1000) .take(2) .map(x => Observable.interval(1500).map(y => x+':'+y).take(2)); const result$ = ho$.switch(); exhaust

exhaust在耗尽当前内部Observable数据之前不会切换到下一个内部Observable对象。和switch一样,exhaust产生的Observable对象完结前提是最新的内部Observable对象完结而且上游高阶Observable对象完结

count

统计上游Observable对象吐出所有数据的个数

const source$ = Observable.of(1,2,3).concat(Observable.of(4,5,6)); const count$ = source$.count(); // 6 max, min

取的最小值和最大值

reduce

规约统计

const source$ = Observable.range(1, 100); const reduced$ = source$.reduce((acc, current) => acc + current, 0); // 参数基本和js中的一致 find和findIndex

在某些情况下,我们希望可以将find和findIndex结合在一起,我们可以这样做

const source$ = Observable.of(3,1,4,1,5,9); const isEven = x => x % 2 === 0; const find$ = source$.find(isEven); const findIndex$ = source$.findIndex(isEven); const zipped$ =find$.zip(findIndex$); defaultIfEmpty

defaultIfEmpty()除了检测上游Observable对象是否为空之外,还要接受一个默认值作为参数,如果上游Observable对象是空的,那就把默认值吐出来

const new$ = source$.defaultIfEmpty('this is default'); filter

过滤

first

如果first不接受参数,那么就是获取的上游的第一个数据
如果first接受函数作为参数,那么就会获取上游数据中满足函数条件的第一个数据

last

工作方式与first刚好相反,从上游数据的末尾开始寻找符合条件的元素

takeWhile

接受一个判定函数作为参数

const source$ = Observable.range(1, 100); const takeWhile$ = source$.takeWhile( value => value % 2 === 0 ); takeUtil

takeUtil是一个里程碑式的过滤类操作符,因为takeUtil让我们可以用Observable对象来控制另一个Observable对象的数据产生

在RxJS中,创建类操作符是数据流的源头,其余所有操作符最重要的三类就是合并类、过滤类和转化类。

map

map用来改变数据流中的数据,具有一一对应的映射功能

const source$ = Rx.Observable.of(1,2,3); // 注意这里只能使用普通函数,箭头函数中的this是绑定在执行环境上的,无法获取context中的值 const mapFunc = function(value, index) { return `${value} ${this.separator} ${index}`; } const context = {separator: ':'}; const result$ = source$.map(mapFunc, context); result$.subscribe( console.log, null, () => console.log('complete') ); mapTo

无论上游产生什么数据,传给下游的都是同样的数据

// 将result$中的数据都映射成A const result$ = source$.mapTo('A'); pluck

pluck就是把上游数据中特定字段的值拔出来

const source$ = Rx.Observable.of( {name: 'RxJS', version: 'v4'}, {name: 'React', version: 'v15'}, {name: 'React', version: 'v16'}, {name: 'RxJS', version: 'v5'} ); const result$ = source$.pluck('name'); result$.subscribe( console.log, null, () => console.log('complete') ); // RxJS // React // React // RxJS // complete

上面的代码中,pluck方法将对象中的键对应的值获取出来

获取DOM事件中的值

const click$ = Rx.Observable.fromEvent(document, 'click'); const result$ = click$.pluck('target', 'tagName'); // HTML 将上游数据放在数组中传给下游操作符 bufferTime

用一个参数来指定产生缓冲窗口的间隔

const source$ = Rx.Observable.timer(0, 100); // 参数400,就会把时间划分为连续的400毫秒长度区块,上游传来的数据不会直接传给下游,而是在该时间区块的开始就新建一个数组对象推送给下游 const result$ = source$.bufferTime(400);

如果上游在短时间内产生了大量的数据,那bufferTime就会有很大的内存压力,为了防止出现这种情况,bufferTime还支持第三个可选参数,用于指定每个时间区间内缓存的最多数据个数

const result$ = source$.bufferTime(400, 200, 2); bufferCount

根据个数来界定

bufferWhen

接受一个函数作为参数,这个参数名为closingSelector

bufferToggle buffer 将上游数据放在Observable中传给下游的操作符 windowTime

用一个参数来指定产生缓冲窗口的间隔

windowCount windowToggle window 高阶map

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzyxwy.html