Rxjs 操作符

1. javascript解决异步编程方案

解决javascript异步编程方案有两种，一种是promise对象形式，还有一种是是Rxjs库形式，Rxjs相对于Promise来说，有好多Promise没有的特性和功能，使用起来更便捷简单；

2. Rxjs 简单介绍

Rxjs 是Reactive Extensions JavaScript 的简写，响应式异步编程；同Promise对象一样，是解决JS异步编程的一种解决方案；

3. Rxjs使用

1. Rxjs是一个库，需要使用npm进行安装；

 ???// 安装rxjs ???npm install rxjs --save ???// 安装rxjs-compat, rxjs-compat软件包在v5和v6之间创建了一个api兼容层 ???npm install rxjs-compat --save

2. Rxjs常用操作符

2-1. 创建操作符: fromEvent、 from、 of、 interval、 create

(1). fromEvent: 创建一个 Observable，该 Observable 发出来自给定事件对象的指定类型事件

// 获取html元素const btnElem = document.querySelector(‘button#rxjsBtn‘);// 创建按钮的点击事件为可观察对象Rx.Observable.fromEvent(btnElem, ‘click‘) .scan(count => count + 1, 0) // count为定义的变量；逗号后面的0为count的初始值；箭头后面的语句值为scan返回的值；.subscribe((count) => { ???console.log(‘fromEvent‘ + count);});/// 第一次点击输出: fromEvent1；第二次点击输出fromEvent2;依次同理

(2). from: 将各种其他对象和数据类型转化为 Observables

const arrayData = [5, 6];Observable.from(arrayData).pipe( ???scan((scanData, item) => scanData += item, 10), ???map((item) => item * 2),).subscribe((data: any) => { ???console.log(‘from:‘ + data);});/// 浏览器输出 from:30 from:42

(3). of: 创建一个 Observable，它会依次发出由你提供的参数，最后发出完成通知。

Observable.of(‘value1‘, ‘value2‘).subscribe((data: any) => { ???console.log(‘of：‘ + data);});/// 浏览器输出 of：value1 of: value2

(4). interval: 返回一个无线自增的序列整数

const numbers = Rx.Observable.interval(1000);numbers.subscribe(x => console.log(‘interval:‘+x));/// 浏览器输出: interval:1 interval2 依次增加

(5). create: 创建Observable对象, 当观察者( Observer )订阅该 Observable 时，它会执行指定的函数

const obs = Observable.create((obsever) => { ?????obsever.next(‘add‘); ?????obsever.next(‘upt‘); ?????obsever.complete(); // 代表完成，之后的语句将不再会被调用;;; ?????obsever.next(‘del‘); ???}); ???// 订阅观察者 ???obs.map(data => data + ‘Map‘).subscribe((data: any) => { ?????console.log(data); ???}); ???/// 浏览器输出: addMap uptMap

2-2. 转换操作符 : Map、MergeMap、MapTo、Scan

(1). Map: 把每个源值传递给转化函数以获得相应的输出值

Rx.Observable.from([1, 2]).map((item) => item * 2).subscribe((data: any) => { console.log(‘map:‘ + data);});/// 浏览器输出: map: 2 map: 4

(2). MergeMap: 将每个源值投射成 Observable ，该 Observable 会合并到输出 Observable 中;;;;可用于串联请求

const mergeA = Observable.of(1, 2, 3);const mergeB = mergeA.map(r => Observable.of(r)).mergeMap(r => r);mergeB.subscribe(c => console.log(‘mergeMap:‘ + c));/// 浏览器输出: mergeMap1 mergeMap2 mergeMap3

(3). MapTo: 类似于 map，但它每一次都把源值映射成同一个输出值。

Observable.of(1, 2, 3).mapTo(33).subscribe(data => {console.log(data);});/// 浏览器输出: 3个55

(4). Scan: 对源 Observable 使用累加器函数， 返回生成的中间值， 可选的初始值

Rx.Observable.from([1, 2]).pipe( ?scan((acc, item) => acc += item, 10)) // acc为一个新变量，item为[1,2]中的每一项， 10为新变量acc的默认初始值；返回新生成的中间值acc reduce同理 ?.subscribe(v => console.log(v))/// ?浏览器输出 11 ?13

2-3. 数学和聚合操作符：reduce

(1). reduce: 和scan同理；只不过中间变量的值不会清0，会保留上一次源操作之后的得到的中间值；并且只会输出最后一个值；

Rx.Observable.from([1, 2]).pipe( ?reduce((acc, item) => acc += item, 10)) ?.subscribe(v => console.log(v))// 输出13

2-4. 过滤操作符: filter、throttleTime

(1). filter: 数据进行过滤返回你想要的数据

import {Observable} from ‘rxjs‘;import {filter} from ‘rxjs/internal/operators‘; from([2, 3, 4]).pipe( ???filter(item => item <= 3)) ???.subscribe(v => console.log(v))// 浏览器输出: 2 3

(2). throttleTime: 在一定时间范围内不管产生了多少事件，它只放第一个过去，剩下的都将舍弃

实现: 一秒内不管有多少点击事件；只触发一次点击事件;，

const throttleElem = document.querySelector(‘#throttleElem‘); ???// 一秒内只触发一次点击事件 ???Rx.Observable.fromEvent(throttleElem, ‘click‘) ?????.throttleTime(1000) ?????.scan(count => count + 1, 0) ?????.subscribe(data => { ???????console.log(‘点击了‘ + data + ‘次‘); ?????});

Rxjs 操作符

原文地址：https://www.cnblogs.com/zero-zm/p/9911827.html