RxJSskipWhile 与过滤器

Question

skipWhile 和过滤器运算符有什么区别？

const source = interval(1000);
const example = source.pipe(skipWhile(val => val < 5));
const subscribe = example.subscribe(val => console.log(val));


const source = interval(1000);
const example = source.pipe(filter(val => val > 5));
const subscribe = example.subscribe(val => console.log(val));

Answer 1

不同之处在于，当其表达式计算为

false

时，skipWhile 会更改为 mirroring 其可观察源 - 因此它将停止过滤掉任何其他值。

例如：

Observable.from([1,2,3,4,5])
  .pipe(filter(val => val % 2 == 0)) // filters out odd numbers
  .subscribe(val => console.log(val)); // emits 2,4

Observable.from([1,2,3,4,5])
  .pipe(skipWhile(val => val % 2 == 1)) // filters odd numbers until an even number comes along
  .subscribe(val => console.log(val)); // emits 2,3,4,5

Answer 2

Observable.from(["Citizen 1","Citizen 2","President","Citizen 3","Citizen 4"])
  .pipe(filter(val => val == "President")) // Only let the president into the bunker.
  .subscribe(val => console.log(val)); // emits President

Observable.from(["Citizen 1","Citizen 2","President", "Citizen 3","Citizen 4"])
  .pipe(skipWhile(val => val != "President")) // Let the citizens enter the bunker, but only after the president enters.
  .subscribe(val => console.log(val)); // emits President, Citizen 3, Citizen 4

Answer 3

skipWhile

运算符将忽略发射，直到指定的条件变为 false，但之后，它将继续按原样从源可观察值获取值。

const randomNumbersLessThanEqualToTen = interval(1000).pipe(map((num) => {
    const randomNumber = Math.floor(Math.random()*num);
    console.log('Random Number Generated', randomNumber);
    return randomNumber;
}), skipWhile(num => num < 10));

randomNumbersLessThanEqualToTen.subscribe((number) => {
    console.log('Number not skipped', number);
});

o/p

Random Number Generated 6
Random Number Generated 0
Random Number Generated 5
Random Number Generated 0
Random Number Generated 5
Random Number Generated 11
Number not skipped 11
Random Number Generated 6

一旦 11（即 num < 10 === false) got generated and emitted all the generated numbers were taken and printed.

这是

filter

的示例：

const randomNumbers = interval(1000).pipe(map((num) => {
    const randomNumber = Math.floor(Math.random() * num);
    console.log('Random Number Generated', randomNumber);
    return randomNumber;
}), filter(num => num > 10));
randomNumbers.subscribe((number) => {
    console.log('Number is greater than 10 -->', number);
});

o/p

Random Number Generated 7
Random Number Generated 11
Number is greater than 10 --> 11
Random Number Generated 13
Number is greater than 10 --> 13
Random Number Generated 13
Number is greater than 10 --> 13
Random Number Generated 3
Random Number Generated 2

因此上面的输出简单地展示了过滤器只是根据指定的条件过滤排放，并且它在可观察到的整个生命周期中进行过滤。

Answer 4

示例

当条件第一次变为 false 时，

skipWhile

将开始发出值（此后条件将被忽略，所有值将被发出）。在下面的示例中（我们生成从 0 到 10 的随机数），在第一次发射 >=5 的值后，将发射所有后续值（因此我们可以看到小于 5 的数字）。

const { interval } = rxjs;
const { skipWhile, map } = rxjs.operators;

const source = interval(1000).pipe(map(_ => Math.floor(Math.random() * 11) ));
const example = source.pipe(skipWhile(val => val < 5));
const subscribe = example.subscribe(val => console.log(val));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

filter

将仅发出满足条件的值。在下面的示例中，仅发出 >5 的值（我们看不到数字 <=5).

const { interval } = rxjs;
const { filter, map } = rxjs.operators;

const source = interval(1000).pipe(map(_ => Math.floor(Math.random() * 11) ));
const example = source.pipe(filter(val => val > 5));
const subscribe = example.subscribe(val => console.log(val));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>