rxjs这个语法怎么有效？答案

【问题标题】：Rxjs how this syntax is valid?rxjs这个语法怎么有效？
【发布时间】：2020-07-09 19:47:11
【问题描述】：

你好，在 Rxjs 文档中我看到了这段代码：

first()(of(1, 2, 3)).subscribe((v) => console.log(`value: ${v}`));

// Logs:
// value: 1

我知道这就像 [1, 2, 3].map(x => x * x) 一样，但我想知道我们是否可以对原生 JavaScript 做同样的事情，如果可以的话，请给我一个例子？

我的问题是：

我不明白 first()(of(1, 2, 3)) 你能解释一下这段代码如何返回一个带有操作符和源的 observable 吗？我知道 operator 是 first() 并且 source 是 of() 但是它们是如何在一个新的 observable 中合并在一起的？

谢谢

【问题讨论】：

那是纯 JavaScript。你的问题到底是什么？
我不明白 first()(of(1, 2, 3)) 你能解释一下这段代码是如何返回一个带有操作符和源的 observable 的吗？我知道 operator 是 first() 并且 source 是 of() 但它们是如何在一个新的 observable 中合并在一起的？

标签： javascript rxjs rxjs-pipeable-operators

【解决方案1】：

执行first()会返回一个函数，该函数接受一个可观察对象并返回一个可观察对象。

让我们分解那行代码，这样可能更容易理解。

first()(of(1, 2, 3)).subscribe((v) => console.log(`value: ${v}`));

下面的代码等价于上面一行：

const myFunction = first();
const source$ = of(1, 2, 3);

const output$ = myFunction(source$);

output$.subscribe(v => console.log(`value: ${v}`));  // value: 1

所以，myFunction 是一个函数，特别是 OperatorFunction，它基本上看起来像这样：

function myFunction(source: Observable): Observable { }

它们如何在一个新的 observable 中合并在一起？

它们并没有真正“合并在一起”，first() 生成函数，然后您以 source$ 作为输入参数执行该函数。

生成的 output$ 是另一个可以订阅的 observable。

【讨论】：

值得注意的是，您可以这样编写它的原因并不是因为 rxjs 开发人员将其设计为以这种方式使用，而是可观察管道如何工作的副作用。 first() 用于管道内
你知道为什么操作符需要返回一个函数，然后将一个可观察对象作为输入吗？为什么我们不能直接做 first($observable) ？

【解决方案2】：

first() 是在(of(1, 2, 3) 上运行的操作。结果将是1，因为1, 2, 3 的第一个值是1，而这正是first() 操作所做的——它采用第一个值。然后通过 .subscribe() 的链接订阅这个 observable - 因此，1 的值最终被打印到控制台。

【讨论】：

【解决方案3】：

这不是使用第一个运算符的预期方式，of(1, 2, 3).pipe(first()) 是它的使用方式。它之所以有效，是因为它首先返回一个函数，该函数将 observable in 作为参数。

【讨论】：