• javascript的Array提供了另一個func~ filter
• 它可以幫助我們快速的過濾出我們要的資訊，如同下面這個例子，相信大家都不陌生!☕

const result = [1, 2, 3, 4, 5].filter((val) => val > 3);
console.log(result);  // 印出[4,5]

• 今天我們來談談RxJS filter

filter

• RxJS的filter的定義:用法與Array.filter()一樣，在filter中使用一個func來定義你的條件式。
  

圖片來源-RxJS官網-filter

Case1: 過濾數據

stackblitz

import { filter, from } from 'rxjs';

// Case1: RxJS filter()
console.log('=== RxJS filter() ===');
from([1, 2, 3, 4, 5])
  .pipe(filter((val) => val > 3))
  .subscribe(console.log);
  
// 印出
// 4
// 5

Case2: 過濾事件處理 - 給我Enter其餘免談

• 這個例子，我想設計一個功能，當使用者在頁面點擊Enter，就馬上印出來!

stackblitz

// Case2: RxJS filter Keyboard event
fromEvent(document, 'keyup') //<-- (1)keyup event
  .pipe(
    map((event: KeyboardEvent) => event.code), // (2) get code
    filter((code) => code === 'Enter') // (3) filter code with "Enter"
  )
  .subscribe(console.log);
  
// 輸出:(按下Enter後)
// Enter
// Enter
// ...
// Enter

解析

1. fromEvent: 擷取鍵盤的值
2. map: 拆解KeyboardEvent中的code
3. filter: 過濾code，直到code==='Enter'，就發出訊號通知

✍Recap

• RxJS filter與Array.filter的使用方法依樣，設定好條件式，就能過濾出我們要的資訊。

• RxJS filter與map很常搭配一起使用。

• 相信今天的例子，對大家來說就像一片小蛋糕一樣~ Easy啦! day13咱們照樣搞定~ 收工!