我每天都在使用的十個 RxJS 運算符
作為一名 Angular 開發人員，您可能會發現以下 RxJS 運算符在您的日常開發中很有用：
01、map()：
此運算符用于轉換可觀察對象發出的值。它以一個函數作為參數，它接收發出的值作為輸入并返回轉換后的輸出。返回的輸出作為可觀察對象的新值發出。例如，您可以使用 map() 將用戶對象流轉換為用戶名流：
import { map } from 'rxjs/operators';
import { UserService } from './user.service';
constructor(private userService: UserService) {}
this.userService.getUsers().pipe(
map(users => users.map(user => user.name))
).subscribe(names => console.log(names));02、filter()：
此運算符用于根據條件過濾掉 observable 發出的值。它以一個函數作為參數，它接收發出的值作為輸入并返回一個布爾值。
如果布爾值為 true，則發出該值，否則將其過濾掉。例如，您可以使用 filter() 只保留整數流中的偶數：
import { filter } from 'rxjs/operators';
import { of } from 'rxjs';
of(1, 2, 3, 4, 5, 6).pipe(
filter(num => num % 2 === 0)
).subscribe(evenNum => console.log(evenNum));03、switchMap()：
每當源可觀察對象發出新值時，此運算符用于切換到新的可觀察對象。它以一個函數作為參數，它接收發出的值作為輸入并返回一個新的可觀察值。
最新的 observable 發出的值由返回的 observable 發出。
例如，您可以使用 switchMap() 根據另一個可觀察對象發出的 ID 獲取用戶數據：
import { switchMap } from 'rxjs/operators';
import { UserService } from './user.service';
constructor(private userService: UserService) {}
this.userId$.pipe(
switchMap(userId => this.userService.getUser(userId))
).subscribe(user => console.log(user));04、catchError()：
此運算符用于處理可觀察對象拋出的錯誤。它以一個函數作為參數，它接收錯誤作為輸入并返回一個新的可觀察對象。
返回的可觀察對象可以發出新值、完成或拋出另一個錯誤。例如，您可以使用 catchError() 重試失敗的 HTTP 請求：
import { catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
this.http.get('/api/data').pipe(
catchError(() => this.http.get('/api/fallbackData'))
).subscribe(data => console.log(data));05、tap()：
此運算符用于在不修改可觀察對象的發射值的情況下執行副作用。它以一個函數作為參數，它接收發出的值作為輸入并可以執行任何副作用。
返回值被忽略，原始值不變。例如，您可以使用 tap() 來記錄可觀察對象發出的值：
import { tap } from 'rxjs/operators';
import { of } from 'rxjs';
of(1, 2, 3).pipe(
tap(value => console.log(`Emitting value: ${value}`))
).subscribe();06、take()：
此運算符用于限制可觀察對象發出的值的數量。這是一個例子：
import { take } from 'rxjs/operators';
import { of } from 'rxjs';
of(1, 2, 3, 4, 5).pipe(
take(3)
).subscribe(value => console.log(value)); // output: 1, 2, 3在此示例中，take(3) 用于將 of(1, 2, 3, 4, 5) 發出的數字流限制為前三個值。
07、debounceTime()：
此運算符用于按指定的時間量對值流進行去抖動。這是一個例子：
import { debounceTime } from 'rxjs/operators';
import { fromEvent } from 'rxjs';
const input = document.getElementById('input');
fromEvent(input, 'input').pipe(
debounceTime(500)
).subscribe(event => console.log(input.value));在此示例中，debounceTime(500) 用于將來自輸入元素的輸入事件流去抖動 500 毫秒。這意味著如果用戶快速連續鍵入，則只會記錄 500 毫秒不活動后的輸入值。
08、distinctUntilChanged()：
此運算符用于僅從值流中發出不同的值。這是一個例子：
import { distinctUntilChanged } from 'rxjs/operators';
import { of } from 'rxjs';
of(1, 2, 2, 3, 3, 3, 4).pipe(
distinctUntilChanged()
).subscribe(value => console.log(value)); // output: 1, 2, 3, 4在此示例中，distinctUntilChanged() 用于僅從 of(1, 2, 2, 3, 3, 3, 4) 發出的數字流中發出不同的值。
09、merge()：
此運算符用于將多個可觀察對象合并為一個可觀察對象。這是一個例子：
import { merge } from 'rxjs';
import { interval } from 'rxjs';
const obs1 = interval(1000);
const obs2 = interval(2000);
merge(obs1, obs2).subscribe(value => console.log(value));在此示例中，merge(obs1, obs2) 用于將兩個可觀察對象 obs1 和 obs2 合并為一個可觀察對象，該可觀察對象從兩個可觀察對象發出值。
10、combineLatest()：
該運算符將多個可觀察對象發出的最新值組合到一個數組中。它僅在其中一個源可觀察對象發出新值時發出新數組。
import { combineLatest, timer } from 'rxjs';
import { map } from 'rxjs/operators';
const observable1 = timer(0, 1000).pipe(map(x => x + ' seconds'));
const observable2 = timer(500, 500).pipe(map(x => x + ' half seconds'));
combineLatest([observable1, observable2]).subscribe(combinedValues => {
const [value1, value2] = combinedValues;
console.log(`observable1: ${value1}, observable2: ${value2}`);
});在這個例子中，我們使用 timer() 函數創建了兩個可觀察對象。第一個 observable 每秒發出一個值，第二個 observable 每半秒發出一個值。我們使用 map() 運算符將發出的值轉換為字符串。
然后我們將一組可觀察對象傳遞給 combineLatest() 函數，該函數返回一個新的可觀察對象，該可觀察對象發出一個包含每個源可觀察對象發出的最新值的數組。我們訂閱這個新的 observable，并在發出新的組合值數組時記錄每個源 observable 發出的值。
這段代碼的輸出看起來像這樣：
observable1: 0 seconds, observable2: 0.5 half seconds
observable1: 1 seconds, observable2: 1 half seconds
observable1: 2 seconds, observable2: 1.5 half seconds
observable1: 3 seconds, observable2: 2 half seconds
observable1: 4 seconds, observable2: 2.5 half seconds如您所見，只要其中一個源可觀察對象發出新值， combineLatest() 運算符就會發出一個新的組合值數組。
在這種情況下，第一個 observable 每秒發出一個新值，第二個 observable 每半秒發出一個新值，因此組合的 observable 每半秒發出一個新值。
