在RxJS，数据流可以理解为经过一条一条的管道，如果这个时候，某一处的管道处理速度跟不上数据产生的速度，就会造成在内存中积压数据，相当于对上游施加了压力，在RxJS中称之为“回压”
throttle和debounce
这两个操作符是常见的，称为“节流”和”防抖“
在浏览器中，比如resize事件后对元素进行重新布局，但是resize触发很频繁的话，每次都会重新布局，是十分消耗性能的，这时候就可以用这两个操作符进行处理
throttle称为节流，可以理解为每隔一段时间内只能进行一次操作，debounce称为“防抖”，可以理解为一段时间只能进行一次操作
比如移动鼠标，如果是throttle的话，也许移动过程中每5秒只会调用一次回调函数，而debounce则可以理解为如果鼠标一直在移动，则在鼠标停止的时候调用回调函数
在RxJS里，这两个操作符分为throttle、debounce和throttleTime、debounceTime，但是只有包含Time的操作符功能对应的是lodash里的throttle和debounce
throttleTime和debounceTime
这两个操作符都接受必选参数dueTime
throttleTime
import { interval } from "rxjs";import { throttleTime } from "rxjs/operators";const source$ = interval(500).pipe(throttleTime(2000));source$.subscribe(console.log);// 0// 两秒后 5// 又两秒后 10// ...使用了throttleTime操作符后，虽然interval是每500毫秒吐出一条数据，但是经过了throttleTime，在2秒的区间内，只会有一条数据吐出
debounceTime
import { fromEvent } from "rxjs";import { debounceTime } from "rxjs/operators";const source$ = fromEvent(document,"mousemove").pipe(debounceTime(200));source$.subscribe(console.log);在上例中，只有鼠标停止移动后的200毫秒后，才会吐出数据
用数据流来控制
了解了throttleTime和debounceTime后，了解throttle和debounce就不难了
throttle和debounce都接受一个函数作为参数，这个函数的参数为当前的value值，需要返回一个可被订阅的对象或者是Promise
import { interval, timer } from "rxjs";import { throttle } from "rxjs/operators";const source$ = interval(1000).pipe( throttle(value => timer(value % 3 === 0 ? 3000 : 1000)));source$.subscribe(console.log);// 0// 4// 6// 10// 12// ...在当前值能被3整除时，下一段3秒内经过throttle只会吐出一个值
同样可以返回Promise
const source$ = interval(1000).pipe( throttle( value => new Promise(resolve => setTimeout(resolve, value % 3 === 0 ? 3000 : 1000)) ));source$.subscribe(console.log);// 和上例输出相同auditTime和audit
aduit操作符和throttle操作符类似，不过throttle是吐出时间段内的第一条数据，aduti是吐出时间段最后一条数据
auditTime
import { interval } from "rxjs";import { auditTime } from "rxjs/operators";const source$ = interval(1000).pipe(auditTime(2000));source$.subscribe(console.log);// 2// 5// 8audit
import { interval, timer } from "rxjs";import { audit } from "rxjs/operators";const source$ = interval(1000).pipe(audit(() => timer(2000)));source$.subscribe(console.log);// 和上例相同sampleTime和sample
sample就是采样的意思，sample操作符需要从一段时间采样一个数据抛弃掉其他数据
sampleTime
sampleTime操作符实际的表现看上去似乎和auditTime类似，但是auditTime操作符是上游吐出数据后，接下来的时间段吐出上游在这段时间产生的最后一个数据
而sampleTime是按照自己的节奏吐出数据
import { interval } from "rxjs";import { sampleTime } from "rxjs/operators";const source$ = interval(300).pipe(sampleTime(500));source$.subscribe(console.log);// 0 2 3 5 7 8 10 12 ...不管上游吐出数据有多快，sampleTime操作符总会按照自己的时间吐出数据
sample
sample操作符和之前的throttle或者是audit都不同，它接受的参数是一个Observable对象，当这个对象产生一个数据的时候，sample就会从上游拿最后一个产生的数据传递给下游
import { fromEvent, interval } from "rxjs";import { map, sample } from "rxjs/operators";const source$ = interval(10).pipe( map(value => value * 10), sample(fromEvent(document, "click")));source$.subscribe(console.log);上例在点击后，sample操作符从上游取最后一个数据，这个数据就是页面加载完成后，到点击时过去的时间
根据数据序列做回压控制
比如上游数据是0、0、1、1、1、2、2，如果说需要去掉重复的数据，只处理0、1、2，这时候，前面介绍的回压控制操作符就没用了
distinct
distinct操作符会对上游吐出的数据去重
import { of } from "rxjs";import { distinct } from "rxjs/operators";const source$ = of(0, 0, 1, 1, 2, 1, 2, 2, 0).pipe(distinct());source$.subscribe(console.log);// 0 1 2普通情况下distinct操作符是使用===比较，如果是对象的话就比较不出来了，好在distinct操作符接收一个keySelector函数来比较复杂类型
import { of } from "rxjs";import { distinct } from "rxjs/operators";const source$ = of( { count: 0 }, { count: 1 }, { count: 1 }, { count: 2 }, { count: 0 }).pipe(distinct(value => value.count));source$.subscribe(console.log);// { count: 0 }// { count: 1 }// { count: 2 }distinct操作符的问题在于，它会存储一个唯一数据集合，如果不同的数据越来越多，那么这个集合也就会越来越大，所以distinct提供了第二个参数，用于刷新内部的唯一数据集合
import { interval } from "rxjs";import { distinct, map } from "rxjs/operators";const source$ = interval(10).pipe( map(value => (value % 2 === 0 ? 1 : 2)), distinct(undefined, interval(2000)));source$.subscribe(console.log)// 1 2// 两秒后// 1 2// ...第二个参数interval操作符每2秒吐出一个数据，通知distinct刷新内部唯一数据集合，所以两秒后又会输出与之前相同的数据
distinctUntilChanged
distinctUntilChanged操作符只会吐出与之前数据不同的数据，所以不需要维护一个内部唯一集合
import { of } from "rxjs";import { distinctUntilChanged } from "rxjs/operators";const source$ = of(1, 1, 1, 2, 2, 2, 1, 1, 2, 2).pipe(distinctUntilChanged());source$.subscribe(console.log);// 1 2 1 2当前值与上一次吐出的值不同的时候，就会吐出当前的值
distinctUntilChanged操作符可以接收2个可选参数，第一个参数是compare函数，第二个参数是keySelector函数
import { of } from "rxjs";import { distinctUntilChanged } from "rxjs/operators";const source$ = of( { age: 4, name: "Foo" }, { age: 7, name: "Bar" }, { age: 5, name: "Foo" }, { age: 6, name: "Foo" }).pipe(distinctUntilChanged((p, q) => p.name === q.name));source$.subscribe(x => console.log(x));// { age: 4, name: 'Foo' }// { age: 7, name: 'Bar' }// { age: 5, name: 'Foo' }distinctUntilKeyChanged
distinctUntilKeyChanged操作符可以理解为distinctUntilChanged操作符的简写形式
import { of } from "rxjs";import { distinctUntilKeyChanged } from "rxjs/operators";const source$ = of( { name: "Foo1" }, { name: "Bar" }, { name: "Foo2" }, { name: "Foo3" }).pipe( distinctUntilKeyChanged( "name", (x, y) => x.substring(0, 3) === y.substring(0, 3) ));source$.subscribe(x => console.log(x));// { age: 4, name: 'Foo1' }// { age: 7, name: 'Bar' }// { age: 5, name: 'Foo2' }上例比较name字段前三个字符
其他操作符
ignoreElements
ignoreElements操作符会忽略上游所有数据，只吐出complete或者error
import { of } from "rxjs";import { ignoreElements } from "rxjs/operators";const source$ = of(1, 2, 3).pipe(ignoreElements());source$.subscribe({ next: console.log, complete: () => console.log("complete")});// completeelementAt
elementAt操作符只会取参数索引的哪一条，不过可以指定默认值
import { of } from "rxjs";import { elementAt } from "rxjs/operators";const source$ = of(1, 2, 3).pipe(elementAt(9, -1));source$.subscribe(console.log);// -1single
single操作符用于判断上游是否只有一条符合条件的数据，是就向下游传递数据，否则抛出一条异常
import { of } from "rxjs";import { single } from "rxjs/operators";const source$ = of(1, 2, 1).pipe(single(value => value === 1));source$.subscribe(console.log);// 不满足，抛出异常// Uncaught Sequence contains more than one element今天修了一天年假，在家休息，轻松学习的感觉真好 突然就很想念读大学的时候，每天都无忧无虑的学习Unity3D 站在人生的十字路口，难免迷茫