（六）温故知新系列之RXJS——RXJS操作符基础(转化类)-六虎

前言

兼并类操作符把多个数据流调集为⼀个数据流，可是调集之前数据是怎样，在调集之后还是那样；过滤类操作符能够筛选掉⼀些数据，其间回压操控的过滤类操作符还能够改动数据传递给下游的时刻，可是数据本⾝不会改动，怎样进就怎样出。这⼀章会介绍RxJS 关于数据的转化处理，也便是让数据管道中的数据发⽣改动。

转化类和过滤类操作符都对数据做⼀些处理，可是过滤类做的处理是筛选，决定哪些数据传递给下流，并不对数据本⾝做处理；⽽转化类操作符不做过滤，会对每个详细数据做⼀些转化。

将每个元素用映射函数发生新的数据 —— map
将数据流中的每个元素映射为同一个数据 —— mapTo
提取数据流中每个数据的某个字段 —— pluck
发生高阶 Observable 目标 —— windowTime、windowCount、windowWhen、windowToggle和window
发生数组构成的数据流 —— bufferTime、bufferCount、bufferWhen、bufferToggel和buffer
映射发生高阶 Observable 目标然后兼并 —— concatMap、mergeMap、switchMap、exhaustMap
发生规约运算成果组成的数据流 —— scan和mergeScan

对数据的转化能够分为两种：

对每个数据做转化。上游的数据和下流的数据仍然是⼀对⼀的关系，只不过传给下流的数据现已是另⼀个数据，⽐如上游传下来的是数据A，传给下流的是数据f（A），其间f是⼀个函数，以A为输⼊回来⼀个新的数据。
不转化单个数据，⽽是把数据重新组合。⽐如上游传下来的是A、 B、C三个数据，传给下流的是⼀个数组数据[A，B，C]，并没有改动上游数据本⾝，仅仅把它们都塞到了⼀个数组目标中传给下流。

在RxJS中，创建类操作符是数据流的源头，其余一切操作符最重要的三类便是兼并类、过滤类和转化类。使⽤RxJS处理问题绝⼤部分时刻便是在使⽤这三种操作符，所以，⼀定要把握这⼀章的知识，一起要及时复习⼀下前⾯的章节内容。

映射数据

假如上游的数据是A、B、C、D的序列，那么能够以为经过转化类操作符之后，就会变成f（A）、f（B）、f（C）、f（D）的序列，其间f是⼀个函数，作⽤于上游数据之后，产⽣的便是传给下流新的数据。

1.map 对源 observable 的每个值使用投射函数

与JS不同之处是map这个操作符能够映射⼀段时刻上异步产⽣的数据。由于RxJS的数据处理⽅式是“推”，每逢上游推下来⼀个数据， map就把这个数据作为参数传给map的参数函数，然后再把函数执⾏的回来值推给下流。

map除了必须要有的函数参数project，还有⼀个可选参数 thisArg，⽤于指定函数project执⾏时的this值。

const { of, interval } = rxjs;
const { map, } = rxjs.operators;
const source$ = of(3, 1, 4);
const mapFunc = function (value, index) {
    return `${value} ${this.separator} ${index}`;
};
const context = { separator: '=>' };
const result$ = source$.pipe(map(mapFunc, context));
result$.subscribe(
    console.log,
);
// 3 => 0
// 1 => 1
// 4 => 2

mapFunc这个函数是map的第⼀个参数，充当project的功用，同时，map还有第⼆个参数context目标，假如⽤上这个参数，那么mapFunc在每次执⾏的时分，this便是map的这个参数context。

注意

mapFunc的界说使⽤了不同的函数表达式，⽽不是箭头方式的函数定义，由于箭头方式的函数界说⾥，this是绑定于界说环境的，map的第⼆个参数也就不会起到任何作⽤。

这是map的⼀个⼩的功用细节，可是，并不主张使⽤，由于依照函数式编程的原则，应该尽量让函数成为纯函数，假如⼀个函数的执⾏依赖于 this，那么就难以预料这个函数的执⾏成果，并不是什么好事。所以，虽然咱们知道map有这个功用，但要尽量防止使⽤它。

2.mapTo 将每个宣布值映射成字符串

mapTo这个函数完全能够⽤ map来完成:

const { of, interval } = rxjs;
const { map, } = rxjs.operators;
const source$ = of(3, 1, 4);
const result$ = source$.pipe(map(() => 'A')); // A A A
const result$ = source$.pipe(mapTo('A')); // A A A
result$.subscribe(
    console.log,
);

3.pluck 挑选属性来宣布。

pluck便是把上游数据中特定字段的值“拔”出来。

const { of, interval } = rxjs;
const { pluck , } = rxjs.operators;
const source$ = of(
    { name: 'RxJS', version: 'v4' },
    { name: 'React', version: 'v15' },
    { name: 'React', version: 'v16' },
    { name: 'RxJS', version: 'v5' }
);
const result$ = source$.pipe(pluck('name'))
result$.subscribe(
    console.log,
);
// RxJS
// React
// React
// RxJS

##缓存窗口：⽆损回压操控

⽆损的回压操控便是把上游在⼀段时刻内产⽣的数据放到⼀个数据调集⾥，然后把这个数据调集⼀次丢给下流。⾥所说的“数据调集”，能够是⼀个数组，也可所以⼀个Observable目标。

RxJS有两组操作符对两种数据调集类型分别提供⽀持，⽀持数组的以buffer最初，⽀持Observable目标的以window最初。

回压操控的进程中，并没有像map和mapTo那样映射产⽣新的数据，仅仅把多个上游数据缓存起来，当机遇合适时，把缓存的数据汇聚到⼀个数组或者Observable目标传给下流，所以也算是转化类操作符的范畴。

假如数据管道中使⽤了这样的转化类操作符，下流必须要做对应的处理，原本下流预期的是⼀个⼀个独⽴的数据，现在会接收到数组或者Observable目标，⾄于怎么处理这些类型数据，决定权完全在下流。

⽆损的回压操控，实际上便是把数据取舍的决策权交给了下流。

关于回压操控，假如使⽤过滤类操作符，虽然是有损的回压操控，但是好处便是对下流来说是通明的，有没有使⽤过滤类操作符不影响下流的处理⽅式；假如使⽤转化类操作符，价值便是下流需求对应改动，好处就是对数据⽆损。假如并不确认该怎么对数据做取舍，那就合适⽤转化类操作符。

4.windowTime和bufferTime 在每个供给的时刻跨度内，收集源 obsercvable 中的值的 observable。

基本⽤法便是⽤⼀个参数来指定产⽣缓冲窗⼜的距离:

const { of, timer } = rxjs;
const { windowTime, } = rxjs.operators;
const source$ = timer(0, 100);
const result$ = source$.pipe(
    windowTime(400)
)
result$.subscribe(
    res => {
        console.log('NEW WINDOW!')
   }
);
// 每400毫秒输出一个 NEW WINDOW!

windowTime的参数是400，也就会把时刻划分为连续的400毫秒长度区块，在每个时刻区块中，上游传下来的数据不会直接送给下流，⽽是在该时刻区块的开始就新创建⼀个Observable目标推送给下流，然后在这个时刻区块内上游产⽣的数据放到这个新创建的Observable目标中。

windowTime产⽣的Observable目标中每个数据仍然是Observable目标，也便是⼀个⾼阶Observable目标。在每个400毫秒的时刻区间内，上游的每个数据都被传送给对应时刻区间的内部 Observable目标中，当400毫秒时刻⼀到，这个区间的内部Observable目标就会完毕。

bufferTime产⽣的是一般的Observable目标，其间的数据是数组方式， bufferTime会把时刻区块内的数据缓存，在时刻区块完毕的时分把一切缓存的数据放在⼀个数组⾥传给下流。很明显，windowTime把上游数据传递出去是不需求推迟的，⽽bufferTime则需求缓存上游的数据，这也便是其名字中带buffer（缓存）的原因。

5.windowCount和bufferCount 每宣布x个项就开启一个新窗口。

const { of, timer } = rxjs;
const { windowCount, } = rxjs.operators;
const source$ = timer(0, 100);
const result$ = source$.pipe(
    windowCount(4)
)
result$.subscribe(
    res => {
        console.log('NEW WINDOW!',res)
    }
);

了解了windowTime 和 windowBuffer 也不难了解这两个带count的操作符了，不过多赘述了。

⾼阶的map

一切⾼阶map的操作符都有⼀个函数参数project，可是和一般map不同，一般map仅仅把⼀个数据映射为另⼀个数据，⽽⾼阶map的函数参数 project把⼀个数据映射为⼀个Observable目标。

先来看一般的map使⽤这个project会产⽣什么样的成果:

const { of, timer, interval } = rxjs;
const { map, take } = rxjs.operators;
const project = (value, index) => {
    return interval(100).pipe(
        take(5)
    )
}
const source$ = interval(200);
const result$ = source$.pipe(
    map(project)
)
result$.subscribe(console.log);// {}

能够看到，在这⾥map产⽣的是⼀个⾼阶Observable目标，project回来的成果成为这个⾼阶Observable目标的每个内部Observable目标。

所谓⾼阶map，所做的事情便是⽐一般的map更进⼀步，不仅仅把 project回来的成果丢给下流就完事，⽽是把每个内部Observable中的数据做组合，浅显⼀点说便是“砸平”，最终传给下流的仍然是一般的⼀阶 Observable目标。

一切xxxxMap称号形式的操作符，都是⼀个map加上⼀个“砸平”操作的组合，了解这样的实质之后，就容易了解⾼阶map了，其实便是把上图中map产⽣的⾼阶Observable利⽤对应的组合操作符兼并为⼀阶的 Observable目标。

6.concatMap 将值映射成内部 observable，并按次序订阅和宣布。

把上⾯使⽤map的代码改为使⽤concatMap

const { of, timer, interval } = rxjs;
const { concatMap, take } = rxjs.operators;
const project = (value, index) => {
    return interval(100).pipe(
        take(5)
    )
}
const source$ = interval(200);
const result$ = source$.pipe(
    concatMap(project)
)
result$.subscribe(console.log); // 01234 01234...

第⼀个内部Observable目标中的数据被完好传递给了 concatMap的下流，可是，第⼆个产⽣的内部Observable目标没有那么快处理，只需到第⼀个内部Observable目标完毕之后，concatMap才会去订阅第⼆个内部Observable，这样就导致第⼆个内部Observable目标中的数据排在了后⾯，绝不会和第⼀个内部Observable目标中的数据交叉。

concatMap合适处理需求次序连接不同Observable目标中数据的操作，有⼀个特别合适使⽤concatMap的应⽤例⼦，便是⽹页应⽤中的拖拽操作。在⽹页应⽤中，拖拽操作便是⽤户的⿏标在某个DOM元素上按下去，然后拖动这个DOM元素，最终松开⿏标这整个进程，⽽且⽤户在⼀个⽹页能够做完⼀个拖拽动作之后再做⼀个拖拽动作，这个进程是重复的，拖拽触及的事件包括mousedown、mousemove和mouseup，所以拖拽功用操控得好的关键，便是要做好这⼏个事件的处理。

假如把mousemove的序列看作是⼀个Observable目标，整个进程能够看作是⼀个⾼阶Observable目标，其间每⼀个内部Observable目标由mousedown事件引发，每⼀个内部Observable对象便是以mouseup完毕的mousemove数据序列，⽽且，每⼀⾏都是⾸尾相接的，不存在数据的交叉。

7.mergeMap 关于每个内部Observable目标直接兼并。

mergeMap关于每个内部Observable目标直接兼并，也便是任何内部Observable目标中的数据，来⼀个给下流传⼀个，不做任何等候。

const { of, timer, interval } = rxjs;
const { mergeMap, take } = rxjs.operators;
const project = (value, index) => {
    return interval(100).pipe(
        take(5)
    )
}
const source$ = interval(200).pipe(take(2));
const result$ = source$.pipe(
    mergeMap(project)
)
result$.subscribe(console.log); // 0120314 ...

mergeMap能够处理异步操作的问题，最典型的应⽤场景便是关于 AJAX恳求的处理。在⼀个⽹页应⽤中，⼀个很典型的场景，每点击某个元素就需求发送⼀个AJAX恳求给服务器端，一起还要依据回来成果更新⽹页中的状态，AJAX的处理当然是⼀个异步进程，使⽤传统的⽅法来解决这样的异步进程代码会⼗分繁杂。

可是，假如把⽤户的点击操作看作⼀个数据流，把AJAX的回来成果也看作⼀个数据流，那么这个问题的解法便是完全另⼀个样⼦，能够⾮常简练，下⾯是⽰例代码：

const sendButton = document.querySelector('#send'); Rx.Observable.fromEvent(sendButton, 'click').mergeMap(() => { return Rx.Observable.ajax(apiUrl); }).subscribe(result => { // 正常处理AJAX回来的成果 });

其间，mergeMap的函数参数部分只需求考虑怎么调⽤AJAX，然后返回⼀个包括成果的Observable目标，剩下来怎么将AJAX成果传递给下流，交给mergeMap就能够了。虽然是⼀个异步操作，可是整个代码仍然是同步的感觉，这便是RxJS的优势。

8.switchMap 映射成 observable，完成前一个内部 observable，宣布值。

上⾯介绍的mergeMap合适处理AJAX恳求，可是使⽤mergeMap存在⼀个问题，便是每⼀个上游的数据都会引发调⽤AJAX⽽且把AJAX成果传递给下流，在某些场景下，这样的处理未必合适。⽐如，当⽤户点击某个按钮时获取RxJS项⽬在 GitHub上当前的star个数，⽤户或许快速点击这个按钮，可是他们肯定是期望取得最新的数据，假如使⽤mergeMap或许就不会取得预计的成果。

⽤户点击按钮，⼀个AJAX恳求宣布去，这时分RxJS的star数为9907，不过由于⽹络速度⽐较慢的原因，这个AJAX恳求的延时⽐较⼤，⽤户等不及了，又点了⼀次按钮，又⼀个AJAX恳求宣布去了。这时分，第⼀个 AJAX恳求现已取得了数据9907，⽽恰在此时国际某个地⽅的开发者也很喜爱RxJS，点击了RxJS项⽬的star，于是RxJS的star数变成了9908，然后，⽤户触发的第⼆个AJAX也到了，拿到了9908的数据。只需触及输⼊输出，延时便是不行预期的，先宣布去的AJAX未必就会先回来，完全有可能第⼆个AJAX恳求的成果⽐第⼀个更早回来，这时分使⽤mergeMap就会出问题了，⽤户会先看到9908，然后又会被第⼀个AJAX恳求的回来修改为9907，毫⽆疑问，9907并不是最新的数据。

switchMap仍然在上游产⽣数据的时分去调⽤函数参数project，但它和 concatMap和mergeMap都不⼀样的是，后产⽣的内部Observable目标优先级总是更⾼，只需有新的内部Observable目标产⽣，就⽴刻退订之前的内部 Observable目标，改为从最新的内部Observable目标拿数据。就像switch的含义⼀样，switchMap做的是⼀个“切换”，只需有更新的内部Observable对象，就切换到最新的内部Observable目标。

const { of, timer, interval } = rxjs;
const { switchMap, take } = rxjs.operators;
const project = (value, index) => {
    return interval(100).pipe(
        take(5)
    )
}
const source$ = interval(200).pipe(take(2));
const result$ = source$.pipe(
    switchMap(project)
)
result$.subscribe(console.log); // 001234

switchMap这个特色适⽤于总是要获取最新AJAX恳求回来的应⽤，只需求把上⾯使⽤mergeMap来兼并AJAX恳求的代码中改为⽤switchMap就能够了。

9.exhaustMap 映射成内部 observable，忽略其他值直到该 observable 完成。

exhaustMap对数据的处理策略和switchMap正好相反，先产⽣的内部 Observable优先级总是更⾼，后产⽣的内部Observable目标被利⽤的唯⼀机会，便是之前的内部Observable目标现已完毕。

10.scan 随着时刻的推移进行归并。

scan和 reduce的区别在于scan对上游每⼀个数据都会产⽣⼀个规约成果，⽽reduce 是对上游一切数据进⾏规约，reduce最多只给下流传递⼀个数据，假如上游数据永不完毕，那reduce也永远不会产⽣数据，⽽scan完全能够处理⼀个永不完毕的上游Observable目标。

const { of, timer, interval } = rxjs;
const { scan, take } = rxjs.operators;
const project = (value, index) => {
    return interval(100).pipe(
        take(5)
    )
}
const source$ = interval(100);
const result$ = source$.pipe(
    scan((accumulation, value) => {
        return accumulation + value;
    })
)
result$.subscribe(console.log); // 0 1 2 3 6 10 15 21 ...

其间，source$距离100毫秒产⽣⼀个数值序列，scan的规约函数参数把之前规约的值加上当前数据作为规约成果，每⼀次上游产⽣数据的时分，这个规约函数都会被调⽤，成果会传给下流，一起成果也会由scan保存，作为下⼀次调⽤规约函数时的accumulation参数。

小结

最简略的数据转化仅仅把上游的某个数据转化为对应的⼀个下流数据，可是数据转化不限于单个数据的转化，还包括把上游的多个数据兼并为⼀个数据传给下流。

这种兼并转化操作不同于兼并类操作符的操作，因为兼并类操作符仅仅转移上游数据，并不会改动数据⾃⾝。转化类操作符也能够⽤来操控回压，这是⼀种⽆损的回压操控⽅法，实质上是把怎么过滤掉⽆关信息的决策权交给了下流。

参考《深入浅出RxJs》——程墨

（六）温故知新系列之RXJS——RXJS操作符基础(转化类)

前言

⾼阶的map

小结

相关文章

Vue Composition API 和 React Hooks 对比

Android-机器学习组件-自定义模型

Vue3.2 新增指令 v-memo 用法详解，提高性能的又一利器！！！

飞书搭建chatgpt机器人

作者信息