RxJS 学习系列 9. 过滤操作符 takeUntil，tak

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>

来看下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}`));