RxJS 转换操作符，继续冲冲冲！熟悉的温故知新，不熟悉的混个脸熟先~
buffer
buffer 顾名思义就是“缓存”，可以在某些条件下进行值的收集，然后再在某些条件下，将收集的值发出。除了 buffer 同类的还有：
bufferCount：收集发出的值，直到收集完提供的数量的值才将其作为数组发出。
bufferTime：收集发出的值，直到经过了提供的时间才将其作为数组发出。
bufferToggle：开启开关以捕获源 observable 所发出的值，关闭开关以将缓冲的值作为数组发出。
bufferWhen：收集值，直到关闭选择器发出值才发出缓冲的值
使用方法大同小异，简单理解为：车站安检，人很多的时候，就有专人在那设卡，控制流量，当设卡的人觉得在某个条件下可以了，就放卡，这里的条件可以是：数量、时间、自定义开启、其它条件值；
e.g.
// 创建每1秒发出值的 observableconst myInterval = interval(1000);// 创建页面点击事件的 observableconst 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]);// 每个数字加10const example = source.pipe(map(val => val + 10));// 输出: 11,12,13,14,15const 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 的衍生也很像。
评论