take 取开头的N个值,需要传入数字类型 takeUntil,takeWhile 都是 take的变种 takeUntil 接收的是 Observable 类型,当这个Observable发出值才完成 takeWhile 接收的是 function ,一旦返回值为false 就完成

skip 跳过开头的N个值,需要传入数字类型 skipUntil,skipWhile 都是 skip 的变种 skipUntil 接收的是 Observable 类型,当这个Observable发出值才完成 skipWhile 接收的是 function ,一旦返回值为false 就完成

总结:take 和 skip 互逆

<script src='../lib/rxjs6.3.3.umd.js'></script>
<script>
    // https://rxjs-cn.github.io/learn-rxjs-operators/operators/filtering/filter.html
    // filter
    // 发出符合给定条件的值

    const { from, interval, timer } = rxjs;
    const { filter, take, last, startWith, skip, takeUntil, takeWhile, skipWhile } = rxjs.operators;


    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // takeUntil 只取timer(5000)开始发出之前的那些值
        takeUntil(timer(5000))
      )
      // 输出 0,1,2,3
      .subscribe(val => console.log(val));

    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // takeWhile 只取timer(5000)开始发出之前的那些值
        takeWhile((val) => val < 5)
      )
      // 输出 -0,-1,-2,-3, -4
      .subscribe(val => console.log(`-${val}`));
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

来看下skip操作,我们只替换take为skip,显示的内容刚好相反

    const { from, interval, timer } = rxjs;
    const { filter, take, last, startWith, skip, takeUntil, takeWhile, skipWhile, skipUntil } = rxjs.operators;

    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // skipUntil 舍弃timer(5000)开始发出之前的那些值
        skipUntil(timer(5000))
      )
      // 从 4 开始输出 每秒1发送一次,4, 5, 6, 7...
      .subscribe(val => console.log(val));


    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // skipWhile 舍弃timer(5000)开始发出之前的那些值
        // 输出
        skipWhile((val) => val < 5)
      )
      // 从 -5 开始输出 每秒1发送一次,如 -5, -6, -7 ...
      .subscribe(val => console.log(`-${val}`));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
上次更新: 2023/9/8 12:20:59