RxJs 中的 mapTo 有什么意義？

Question

我正在閱讀mapTo的文檔，但我根本沒有理解該運營商存在的意義。 我明白了它的作用，但下面的兩行應該產生等效的結果。

const outcome = "bzzz";
const result1 = source.map(a => outcome);
const result2 = source.mapTo(outcome);

然而，RxJs 的創建者選擇通過添加額外的方法來增加復雜性。 這似乎毫無意義，所以我懷疑它的意義遠不止眼前所見。

為這種特定情況配備專門的操作員有什么意義？

Answer 1

map和mapTo的區別

• map源代碼
• mapTo源代碼

乍一看，我們可以看到map接受一個回調 function

function map<T, R>(project: (value: T, index: number) => R, thisArg?: any)

而mapTo接受static 值

function mapTo<R>(value: R)

因此，一個明顯的區別是map的回調 function 可以根據提供的 arguments 生成一個值。 這不是mapTo的情況，您只需提供一個值，該值將始終傳遞給鏈中的下一個訂閱者。 如果你願意， mapTo(value)可以是

map(() => value)

我們也可以從源代碼中推斷出：

// `mapTo`
() => subscriber.next(value)

// `map`; `project` is the provided callback function
() => subscriber.next(project.call(thisArg, value, index++));

但是您可能不想這樣做，當您可以直接使用值時，為什么還要調用 function 呢？

一些用例

一個用例可能是當您具有 NgRx 效果並且您希望在發生某些事情時返回相同的、非動態的操作。

createEffect(
  () => this.actions.pipe(
    /* some logic here... */
    mapTo(staticAction('a message here')),
  )
);

另一種可能看起來不太實用的情況是，當您想要模擬一些請求時：

merge(
  timer(300).pipe(mapTo("req#1")),
  timer(600).pipe(mapTo("req#2")),
  timer(100).pipe(mapTo("req#3")),
  timer(900).pipe(mapTo("req#4")),
).pipe(
  /* some complicated logic here... */
)

無論如何，至少從我的角度來看，這個運算符的意義在於表明您想要傳遞 static 值，因此這些值不依賴於前一個訂閱者的數據。

Answer 2

mapTo實際上只是為特定映射場景提供便利，其中：

1. output 不依賴於可觀察源的發射
2. output 將始終是相同的 static 值

第二點需要注意，因為如果目標值隨時間變化， map(a => target)和mapTo(target)之間的 output 會有差異：

• map(a => outcome) results) - 將返回“結果”的當前值（可能不同的結果）
• mapTo(outcome) - 將返回 'outcome' 的第一個發射值（每次都相同的結果）

let outcome = 0;
// change 'outcome' every second
interval(1000).pipe(tap(n => outcome = n * 2)).subscribe();

const source = interval(1000).pipe(take(4));

source.pipe(map(a => outcome));  // 0, 2, 4, 6
source.pipe(mapTo(outcome));     // 0, 0, 0, 0

StackBlitz 演示