小编给大家分享一下Observables在JavaScript编程中有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

要开始讨论 Observables， 我们首先安装RxJS库，如下所示：

npminstallrxjs

RxJS库已经包括由 Typescript 所需的申报文件，所以没有必要单独使用@types安装它们。

要生成一个 Observable，我们可以使用of，如下函数：

import{of,Observable}from"rxjs";constemitter:Observable<number>=of(1,2,3,4);

在这里，我们首先从rxjs库中导入of函数和Observable类型 。然后我们定义一个名为emitter的常量变量 ，它使用通用语法将其类型定义为类型number的 Observable 。然后我们将of函数的结果分配给 发射器变量，这将创建一个从数字 1 到 4 的 Observable。我们现在可以创建一个 Observer，如下所示：

emitter.subscribe((value:number)=>{console.log(`value:${value}`)});

在这里，我们调用变量emitter上的subscribe函数。由于emitter变量是 Observable 类型，它会自动公开subscribe函数以注册Observers。subscribe 函数将一个函数作为参数，该函数将为 Observable 发出的每个值调用一次。这段代码的输出如下：

value:1value:2value:3value:4

在这里，我们可以看到我们传递给subscribe函数的函数确实为 Observable 发出的每个值调用了一次。

请注意，只有在Observable上调用subscribe 函数时，Observable 才会开始发出值。调用该subscribe函数称为订阅 Observable，而 Observable 产生的值也称为 Observable 流。

of函数有一个名为from的伙伴函数，它使用一个数组作为 Observable 的输入，如下所示：

constemitArray:Observable<number>=from([1,2,3,4]);emitArray.subscribe((value:number)=>{console.log(`arr:${value}`);});

在这里，我们有一个名为emitArray的变量 ，它的类型是Observable<number>，并且正在使用该from函数从数组中创建一个 Observable。同样，我们对名为emitArray 的 Observable 上调用subscribe函数 ，并为 Observable 发出的每个值提供一个要调用的函数。这段代码的输出如下：

arr:1arr:2arr:3arr:4

在这里，我们可以看到from函数已经从数组输入创建了一个 Observable 流，并且我们提供给subscribe函数的函数正在为Observable 发出的每个值都调用一次。

RxJS库为所有的 Observable 提供了一个pipe函数，类似 subscribe 函数。该pipe函数将可变数量的函数作为参数，并将对 Observable 发出的每个值执行这些函数。提供给pipe函数的函数通常称为 Observable 操作符，它们都接受一个 Observable 作为输入，并返回一个 Observable 作为输出。 pipe函数发出一个 Observable 流。

这个概念最好通过阅读一些代码来解释，如下例所示：

import{map}from"rxjs/operators";constemitter=of(1,2,3,4);constmodulus=emitter.pipe(map((value:number)=>{console.log(`received:${value}`);returnvalue%2;}));modulus.subscribe((value:number)=>{console.log(`modulus:${value}`);});

在这里，我们从一个名为emitter的 Observable 开始 ，它将发射值 1 到 4。然后我们定义一个名为modulus 的变量来保存对emitter Observable调用pipe 函数的结果。我们为pipe函数提供的的唯一参数是对map 函数的调用 ，它是RxJS的运算符函数之一。

map函数将单个函数作为参数，并将为 Observable 发出的每个值调用此函数。该map函数用于将一个值映射到另一个值，或以某种方式修改发出的值。在此示例中，我们返回将 2 的模数应用于每个值的结果。

最后，我们订阅 Observable 并将其值记录到控制台。这段代码的输出如下：

received:1modulus:1received:2modulus:0received:3modulus:1received:4modulus:0

在这里，我们可以看到emitterObservable 发出 1 到 4 的值，并且 modules Observable正在为接收到的每个值发出的Modules 2。

请注意，在这些代码示例中，我们没有明确设置 Observable 的类型。

emitterObservable和modules Observable可以显式类型如下：

constemitter:Observable<number>=of(1,2,3,4);constmodulus:Observable<number>=emitter.pipe(...);

在这里，我们指定了emitterObservable 和modules Observable的类型。这不是绝对必要的，因为 TypeScript 编译器会在使用 Observables 时确定正确的返回类型。然而，它确实明确说明了我们对 Observable 流的期望，并且在更大或更复杂的 Observable 转换中，明确设置预期的返回类型使代码更具可读性并可以防止错误。

pipe函数允许我们组合多个运算符函数，每个函数都将应用于 Observable 发出的值。考虑以下代码：

constemitter=of(1,2,3,4);conststringMap=emitter.pipe(map((value:number)=>{returnvalue*2}),map((value:number)=>{return`str_${value}`}));stringMap.subscribe((value:string)=>{console.log(`stringMapemitted:${value}`);});

在这里，我们有一个Observable的命名 emitter，它将发射值 1 到 4。然后我们有一个名为stringMap的变量 ，用于保存 emitter Observable的pipe 函数的结果 。在这个pipe函数中，我们有两个map函数。第一个map函数将传入的数值乘以2，第二个map函数将其转换为带有前缀的字符串str_。

然后我们订阅 Observable 并将每个值记录到控制台。这段代码的输出如下：

stringMapemitted:str_2stringMapemitted:str_4stringMapemitted:str_6stringMapemitted:str_8

在这里，我们可以看到两个map函数都应用于emitterObservable发出的每个值。请注意，在我们的第二个 map 函数中，我们实际上已经将每个值的类型从 number 类型修改为 string 类型。这就是为什么在我们的函数中为value 参数指定subscribe的类型是 string 类型的原因。

以上是“Observables在JavaScript编程中有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！