RxJS skipWhile vs filter

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将更改为镜像其源可观察对象 - 因此它将停止过滤掉任何其他值.

例如:

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")) // Allow in a bunker only a president
  .subscribe(val => console.log(val)); // emits President

Observable.from(["Citizen 1","Citizen 2","President", "Citizen 3","Citizen 4"])
  .pipe(skipWhile(val => val != "President")) // Allow citizens in a bunker after a president has entered and is safe.
  .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);
});

输出/输出

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）生成并发出，所有生成的数字都被获取并打印。

这是一个示例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);
});

输出/输出

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

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