5 分钟温故知新 RxJS 【转换操作符】

掘金安东尼

发布于 2022-09-19 10:47:38

6030

发布于 2022-09-19 10:47:38

文章被收录于专栏：掘金安东尼

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

RxJS 转换操作符，继续冲冲冲！熟悉的温故知新，不熟悉的混个脸熟先~

buffer

buffer 顾名思义就是“缓存”，可以在某些条件下进行值的收集，然后再在某些条件下，将收集的值发出。除了 buffer 同类的还有：

bufferCount：收集发出的值，直到收集完提供的数量的值才将其作为数组发出。
bufferTime：收集发出的值，直到经过了提供的时间才将其作为数组发出。
bufferToggle：开启开关以捕获源 observable 所发出的值，关闭开关以将缓冲的值作为数组发出。
bufferWhen：收集值，直到关闭选择器发出值才发出缓冲的值

使用方法大同小异，简单理解为：车站安检，人很多的时候，就有专人在那设卡，控制流量，当设卡的人觉得在某个条件下可以了，就放卡，这里的条件可以是：数量、时间、自定义开启、其它条件值；

e.g.

// 创建每1秒发出值的 observable
const myInterval = interval(1000);
// 创建页面点击事件的 observable
const bufferBy = fromEvent(document, 'click');

/*
  收集由 myInterval 发出的所有值，直到我们点击页面。此时 bufferBy 会发出值以完成缓存。
  将自上次缓冲以来收集的所有值传递给数组。
*/
const myBufferedInterval = myInterval.pipe(buffer(bufferBy));
// 打印值到控制台

// 例如 输出: [1,2,3] ... [4,5,6,7,8]
const subscribe = myBufferedInterval.subscribe(val =>
  console.log(' Buffered Values:', val)
);

concatMap

concatMap 可以将值进行映射，还有一个与之相似的是 mergeMap，类比来说：一个是 reduce promise，一个是 PromiseAll；

// concatMap
// 发出 'Hello' 和 'Goodbye'
const source = of('Hello', 'Goodbye');

// 使用 promise 的示例
const examplePromise = val => new Promise(resolve => resolve(`${val} World!`));

// 将 source 的值映射成内部 observable，当一个完成发出结果后再继续下一个
const example = source.pipe(concatMap(val => examplePromise(val)));

// 输出: 'Example w/ Promise: 'Hello World', Example w/ Promise: 'Goodbye World'
const subscribe = example.subscribe(val =>
  console.log('Example w/ Promise:', val)
);


// mergeMap
// 发出 'Hello'
const source = of('Hello');

// mergeMap 还会发出 promise 的结果
const myPromise = val =>
  new Promise(resolve => resolve(`${val} World From Promise!`));
  
// 映射成 promise 并发出结果
const example = source.pipe(mergeMap(val => myPromise(val)));

// 输出: 'Hello World From Promise'
const subscribe = example.subscribe(val => console.log(val));

map

map 最关键了，它能对源 observable 的每个值应用投射函数。

// 发出 (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
// 每个数字加10
const example = source.pipe(map(val => val + 10));
// 输出: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));

reduce

常见的还有 reduce，它能将源 observalbe 的值归并为单个值，当源 observable 完成时将这个值发出。

const source = of(1, 2, 3, 4);
const example = source.pipe(reduce((acc, val) => acc + val));

// 输出: Sum: 10'
const subscribe = example.subscribe(val => console.log('Sum:', val));

window

还有：window 操作符，是时间窗口值的 observable；

// RxJS v6+
import { timer, interval } from 'rxjs';
import { window, scan, mergeAll } from 'rxjs/operators';

// 立即发出值，然后每秒发出值
const source = timer(0, 1000);
const example = source.pipe(window(interval(3000)));
const count = example.pipe(scan((acc, curr) => acc + 1, 0));
/*
  "Window 1:"
  0
  1
  2
  "Window 2:"
  3
  4
  5
  ...
*/
const subscribe = count.subscribe(val => console.log(`Window ${val}:`));
const subscribeTwo = example
  .pipe(mergeAll())
  .subscribe(val => console.log(val));

其实除了：window，还有其衍生的 windowCount、windowTime、windowToggle、windowWhen。与 buffer 的衍生也很像。

OK，以上便是本篇分享，往期关于 RxJS 的内容：