RxJS 系列 – Transformation Operators
前言
前几篇介绍过了
这篇继续介绍 Transformation Operators.
参考
Docs – Transformation Operators
map
就是 Array 的 map 咯
const obs = from([1, 2, 3, 4]); obs.pipe(map(v => v + 10)).subscribe(v => console.log(v)); // 11..12..13..14
scan
scan 相等于 Array 的 reduce
const obs = from([1, 2, 3, 4]); obs .pipe( scan((acc, value, _index) => { return acc + value; }, 0) ) .subscribe(v => console.log(v)); // 1..3..6..10
每一次 acc 代表上一次 return value
value 表示 obs 这一次的值
而第一次发布的时候, 由于没有上一次, acc 的值将是 init value (也就是 scan 的第二个参数)
pairwise
pairwise 是 "一对" 的概念, 它每次接收都是 2 个值, 当前值和上一次值
const obs = from([1, 2, 3, 4]); obs.pipe(pairwise()).subscribe(v => console.log(v)); // [1,2]..[2,3]..[3,4]
由于第一次发布时, 没有 "上一次值", 所以不会接收, 上面例子中, 发布了 4 次, 但是接收只有 3 次.
concatMap
之前介绍过 concat, 把一堆 Observables 丢给它, 它会从第一个开始 subscribe 直到那一个 Observable complete 后再去 subscribe 下一个 Observable, 直到那一堆 Observable 全部结束.
concat(o1, o2, o3, o4).subscribe()
concatMap 和 concat 概念一样都是 complete 后去 subscribe 下一个. 不同地方在于那一堆 Observables 提供的方式
const obs = from([1, 2, 3, 4]);
obs.pipe(concatMap(v => of(v))).subscribe(v => console.log(v));
concatMap() 接收 obs 的值, 然后返回 Observable. 上面例子中 obs 发布 4 次. concatMap 也就发布 4 个 Observables
而这 4 个 Observables 就被 concat(o1, o2, o3, o4) 了.
所以你也能把它理解为一种动态的 concat. 因为 concat(observables) 是初始化就决定了多少个 observables 被放进去.
而 concatMap 则是一个一个添加进去的.
mergeMap
理解了 concatMap 就理解了 mergeMap. 它就是动态的 merge.
merge 的特点是, 它不像 concat 那样会等待 complete. 它会直接 subscribe 所以的 Observables.
switchMap
没有 switch 只有 switchMap.
switchMap 的接口和 concatMap, mergeMap 一样, 接收 obs 的值, 并且返回一个 Observable
concatMap 和 mergeMap 会把返回的 Observable 堆叠起来 (concat 挨个挨个 subscribe, merge 直接 subscribe all)
但 switchMap 不会把 Observable 堆叠起来, 它会 subscribe Observable, 一旦有下一个 Observable, 它会 unsubscribe 上一个 Observable (丢弃它), 然后 subscribe 下一个 Observable.
这也是为什么没有 switch 只有 switchMap, 因为它只有一个 Observable 不像 merge 和 concat 有一堆 Observable.
const obs = fromEvent(document, 'click'); obs .pipe(switchMap(v => fetch('https://random-data-api.com/api/v2/users').then(r => r.json()))) .subscribe(v => console.log(v));
每次点击就会发 ajax, 如果点击很快, ajax 还没有返回, 那么会放弃上一次的 ajax 请求, 马上在发新的 ajax.
exhaustMap
switchMap 和 exhaustMap 的关系有点类似 debounceTime 和 throttleTime 的关系.
debounceTime 的特色是 delay and keep postpone
throttleTime 的特色是 immediately + skip
switchMap 有新 Observable 它就会丢弃旧的, subscribe 新的. 这样连续就会导致 subscriber 一直接收不到值. 这个就像 debounceTime 的 keep postpone.
exhaustMap 则像 throttleTime, 有 Observable 后它就 subscribe. 在 Observable 没有 complete 前 (注: 一定要 complete 哦, next 不够), 它无视接下来每一个新的 Observables.
switchScan
switchScan 和 swtichMap 概念差不多, 只是引入了 scan 的概念.
const obs = fromEvent(document, 'click'); obs .pipe( switchScan((acc, _value, _index) => { return timer(2000).pipe(map(() => acc + 1)); }, 0) ) .subscribe();
第 1 秒 click, acc = 0 (初始值)
第 2 秒 click, acc = 0 因为返回的 Observable 需要 2 秒, 而 click 太快了, swtich 的概念就是放弃之前的, 拥抱新的.
第 4 秒 click, acc = 1
第 6 秒 click, acc = 2
再一个常见的例子 input filter：
有一个 input，和一个 cars array
const input = new BehaviorSubject<string>(''); const allCars = [ 'Tesla Model S', 'Tesla Model S+', 'Tesla Model S++', 'Nissan Leaf', 'Chevrolet Bolt', 'Ford Mustang Mach-E', 'Porsche Taycan', 'BMW 7 Series', 'Mercedes-Benz S-Class', 'Audi A8', 'Lexus LS', 'Jaguar XJ', ];
接着 input filter
input.next('Tes'); // ['Tesla Model S', 'Tesla Model S+', 'Tesla Model S++']
await firstValueFrom(timer(2000));
input.next('Tesla Model'); // ['Tesla Model S+', 'Tesla Model S++']
由于第二轮的 input 是第一轮的延续，所以它的 result 可以从第一轮 result 中里 filter 出来。
input .pipe( switchScan< string, // 每一次返回当前的 search result 和之前的缓存 results { searchResult: SearchResult; cachedSearchResults: SearchResult[] }, Observable<{ searchResult: SearchResult; cachedSearchResults: SearchResult[] }> >( ({ cachedSearchResults }, searchText) => { const currSearchText = searchText.toLowerCase(); if (currSearchText === '') { // 没有 search 就没有 result return of({ searchResult: { searchText, cars: [] }, cachedSearchResults }); } // 先找缓存看看 const cachedSearchResult = cachedSearchResults.find(({ searchText }) => currSearchText.startsWith(searchText.toLowerCase()), ); if (cachedSearchResult) { // 有缓存就直接拿缓存做 local filter return of({ searchResult: { searchText, cars: cachedSearchResult.cars.filter(car => car.toLowerCase().includes(currSearchText)), }, cachedSearchResults, }); } // 没有缓存才 ajax return timer(600).pipe( switchMap(() => timer(500).pipe( map(() => { const searchResult: SearchResult = { searchText, cars: allCars.filter(car => car.toLowerCase().includes(searchText.toLowerCase())), }; // 记得把 search result 添加到缓存里 return { searchResult, cachedSearchResults: [...cachedSearchResults, searchResult] }; }), ), ), ); }, { searchResult: { searchText: '', cars: [] }, cachedSearchResults: [] }, ), ) .subscribe(({ searchResult: { searchText, cars } }) => console.log('cars', [searchText, cars]));
第一轮需要 ajax，第二轮则不需要。
concatMap, switchMap, mergeMap, exhaustMap 小结
参考: RxJS 轉換類型 Operators (2) - switchMap / concatMap / mergeMap / exhaustMap
bufferTime
bufferTime 的作用是把 Observable 发布的值缓存起来, 等时机到了一次接收
const obs = timer(0, 1000);
obs.pipe(bufferTime(3000)).subscribe(values => console.log(values));
效果
obs 每秒发布一个值, 经过 bufferTime 会被缓存起来, 直到每 3 秒 bufferTime 发布, console 才会接收到 3 秒内缓存的所以值.
效果图中, 第 3 次接收 4 个 values 是因为计时有微差.
bufferCount
和 bufferTime 一样都是先缓存, 然后在一起发布. 区别是它不是以时间来计算, 它以数量做计算.
const obs = timer(0, 1000);
obs.pipe(bufferCount(3)).subscribe(values => console.log(values));
效果
缓存满 3 个就一起发布.
startBufferEvery
bufferCount 还有第二个参数叫 startBufferEvery, 虽然冷门, 但也可以了解一下.
它的玩法是这样的
const obs = interval(1000); obs .pipe(bufferCount(3, 2)) .subscribe(values => console.log((performance.now() / 1000).toFixed(0) + 's', values));
bufferCount(3, 2) 表示每当 obs 发布 2 次, subscrube 就接收一次包含 3 个值
效果
2 个点要注意.
一, 2, 4 值重复了, 因为要求每 2 次发布就要接收 3 个值, 那就差了一个, 于是就拿之前的补上.
二, 第一次发布等待了 3 秒, 第二次则是 2 秒, 因为每一次要求 3 个 值, 而第一次 2 秒钟收集时并不满足要求, 而一到 3 秒中满足了需求就立刻发布.
buffer
buffer 的区别是, 我们可以完全控制什么时机发布. 不只是 by time or by count, 可以 by whatever
const obs = timer(0, 1000);
obs.pipe(buffer(fromEvent(document, 'click'))).subscribe(values => console.log(values));
当 document click 的时候把缓存一并发布.
bufferWhen
参考: Stack Overflow – What's the difference between the RxJS operators "buffer" and "bufferWhen"?
bufferWhen 和 buffer 有一个小区别. buffer 的参数是一个 Observable
bufferWhen 的参数是一个 () => Observable
obs .pipe( bufferWhen( () => new Observable(subscriber => { console.log('Observable Init'); document.addEventListener('click', () => { subscriber.next(); }); return () => { console.log('Observable Displose'); }; }) ) ) .subscribe(values => console.log(values));
buffer 参数 Observable 只会被 subscribe 一次.
bufferWhen 参数返回的 Observable 在每一次原 obs 一并发布后都会被 resubscribe
上面代码的效果是这样的
bufferToggle
上面的 buffer operators 都只有一个 "发布时机".
bufferToggle 有 2 个时机, 一个是 "发布时机", 另一个是其它 buffer operators 没有的 "开始缓存时机".
参数 1 是开始缓存, 参数 2 是发布.
const obs = timer(0, 1000); obs .pipe(bufferToggle(fromEvent(document, 'click'), () => fromEvent(document, 'contextmenu'))) .subscribe(values => console.log(values));
效果
我在第 3 秒的时候 click 了一下, 第 6 秒 right click 了一下, 所以得到了 [3, 4, 5]
又在 第 10 秒 click 了一下, 第 13 秒 right click 了一下, 得到了 [10, 11, 12]
这就是所谓的, 控制开始和发布时机. 不在时机内的值将会丢失. 像 0, 1, 2, 6, 7, 8, 9 都接收不到.
buffer operators 小结
参考: 30 天精通 RxJS (12)： Observable Operator - scan, buffer
常用到的是 bufferTime, bufferCount, buffer.
bufferWhen 和 bufferToggle 我目前都没有用过.
windowTime, windowCount, window, windowToggle, windowWhen
参考:
RxJS window() Transformation Operator
Stack Overflow – What does the `window` mean in RxJS?
30 天精通 RxJS(20): Observable Operators - window, windowToggle
window 和 buffer 基本上是一样的. 唯一的区别是 buffer 接收的是 Array. window 接收的是 Observable (类似于 from(Array))
我们来看一个对比, 感受一下它们的区别
const obs = timer(0, 1000);
obs.pipe(bufferTime(10000)).subscribe(values => console.log(values));
10 秒钟后会接收到 Array [0, 1, 2 ... 10]
换成 windowTime
const obs = timer(0, 1000); obs .pipe( windowTime(10000), switchMap(v => v) ) .subscribe(values => console.log(values));
1 秒钟后就会接收到 value 1
一个 10 秒后才接收, 一个第 1 秒就开始接收了, 这就是所谓的 immediately
那什么时候用 window 什么时候用 buffer 呢? 我不清楚, 但我自己的经验是绝大部分情况下用 buffer 就够了.
groupBy
和 array 的 groupBy 一个概念
const obs = new Observable<{ name: string; age: number }>(subscriber => { subscriber.next({ name: 'dada', age: 1 }); subscriber.next({ name: 'derrick', age: 2 }); subscriber.next({ name: 'dada', age: 3 }); subscriber.next({ name: 'derrick', age: 4 }); }); obs.pipe(groupBy(v => v.name)).subscribe(g => { g.subscribe(v => console.log(g.key, v)); });
当 obs 发布新值的时候, groupBy 会依据 key 查看之前是否有创建过 GroupedObservable
如果没有就创建新的, 并且发布下去. 所以 subscribe 接收到的是 GroupedObservable 哦.
如果已经创建过了, 那么它就 .next 把值传下去.
上面的例子中, subscribe 会接收 2 次, 一个是 dada 的 GroupedObservable 另一个是 derrick 的 GroupedObservable
订阅这些 Observable 就可以获取到每次发布的对象了.
我在项目中没有用过 groupBy 一时也想不到什么情况可能会用到它.
没有介绍到的 Transformation Operators
expand
mergeScan
废弃了的 Transformation Operators
mapTo
switchMapTo
concatMapTo
mergeMapTo
pluck
partition
exhaust
一句话总结
map : Array map
scan : Array reduce
pairwise : 每次接收 “一对”, [prev value, curr value]
concatMap : concat(动态 Observables)
mergeMap : merge(动态 Observables)
switchMap : 自动 subscribe map 返回的 Observable, 当有新的 Observable 自动 unsubscribe 上一个 Observable
exhaustMap : switchMap unsubscribe old + subscribe new, exhaustMap subscribe old + skip new (until old complete)
switchScan : switchMap 引入 scan 概念
bufferTime : 缓存值, 到时机一并发送 array
bufferCount : 缓存到量, 一并发送
buffer : 用 notification observable 控制一并发送时机
bufferToggle : 控制开始缓存时机和发送时机
bufferWhen : notification observable 会被 resubscribe, buffer 不会
window operators : 和 buffer 一样, 唯一区别是它不接收 Array 而是 Observable 类似于 from(Array), 还有, 接收的时机不同, buffer 是等 array 满了才接收, window 是一开始就持续接收直到 complete.
groupBy : 把值进行分组, 发布 GroupedObservable
