Rxjs6學習： 過濾操做符

前言

在使用 angular 的過程當中，rxjs的強大方便毋庸置疑，可是在初學的時候它的各類操做符是真的讓人是查的心累。把使用及查到的各類操做符記錄下來，方便查找。

過濾符

• startWith: 在開頭添加要發送的元素
• filter: 傳入function 過濾發送的元素(相似數組 filter)
• scan： 傳入function (相似數據reduce 函數第一參數是返回值，第二個值是數據流)
• skip: 傳入數字，跳過N個元素
• skipUntil 接收的是 Observable 類型，忽略Observable發出以前的值 (同takeUntil理解)
• skipWhile 接收的是 function ，返回true則過濾，一旦false則後面不過濾 (同takeWhile理解)
• last: 取最後一個元素 (注意放的位置)
• first: 取最後一個元素 (注意放的位置)
• take: 傳入數字，只取N個數的元素
• takeUntil 接收的是 Observable 類型，當這個Observable發出值 就complete
• takeWhile 接收的是 function ，一旦返回值爲false 就complete

import { from, timer, Subject } from 'rxjs';
import { filter, take, last, startWith, skip } from 'rxjs/operators';
destroy$ = new Subject();
ngOnInit() {
   // 發出(1, 2, 3, 4, 5)
   const source = from([1, 2, 3, 4, 5]);
   const example = source.pipe(
     // 開頭追加 6, 8 得 6, 8, 1, 2, 3, 4, 5
     startWith(6, 8),
     // 跳過前兩個 
     skip(2),
     // 只取偶數得
     filter(num => num % 2 === 0),
     // 數據累加
     scan((all,item) => all + item),
     // 再取前兩個值
     take(2),
     // 只取最後一個值
     last(),
     // 取x < 3的值，>=3 則example 就處於complate 狀態
     takeWhile(x => x < 3),
     // 取timer事件發出以前的值，發出後example 就處於complate 狀態
     takeUntil(timer(5000)),
     takeUntil(this.destroy$), 一般用於組件銷燬時 complate 狀態
   );
   example.subscribe(val => {
     console.log(`The number: ${val}`)
   });
}
ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complate();
}
複製代碼

防抖節流

• debounce 防抖 會根捨棄掉在兩次輸出之間小於指定時間的發出值。
• debounceTime: 接收毫秒數，捨棄掉在兩次輸出之間小於指定時間的發出值(最後一次輸入毫秒數以後出發)。
• throttleTime： 接收毫秒數，通過指定的這個時間後發出最新值。

// 防抖
interval(1000).pipe(
    // 5秒後，debounce 的時間會大於 interval 的時間，以後全部的值都將被丟棄
    debounce(val => timer(val * 200)),
);
fromEvent(this.input.nativeElement, 'input').pipe(
    // 兩次輸入小於1秒忽略 最後一次輸入1秒後觸發一次
    debounceTime(1000)
    //首次輸入 及連續輸入到達2秒返回最新值，最後一次輸入距離上次輸入不到2秒則不會觸發最後一次輸入。
    throttleTime(2000)
).subscribe( (x: any) => {
    console.log('x', x.target.value);
});
複製代碼

後續

暫時就先記這麼多，後面還有合併操做符等等，慢慢記。忘了再翻翻！