源代碼：

import { of } from 'rxjs'; import { Injectable } from '@angular/core'; import { map } from 'rxjs/operators';@Injectable() export class JerrySandBoxService{name = 'Jerry';print(){const observable = of(1, 2, 3);const opt = map(num => 'hello world: ' + num + ' done');const newObservable = opt(observable);newObservable.subscribe(data => console.log(data));} }

執行結果：

map操作符接收的是一個箭頭函數：

map內部的實現：返回一個新的名為mapOperation的函數，接受單參數。

現在執行opt操作：

source是Observable，project是應用開發人員指定的箭頭函數：

Map operator的構造函數：

新建一個Observable對象，將當前Observable對象傳給source，operator.project即箭頭函數：

對新的Observable對象調用subscribe：

注意這種語法：把this里包含的operator對象賦值給大括號里的operator變量：

sink是subscriber，source是Observable，operator是箭頭函數：

如果有operator，先執行箭頭函數：

把箭頭函數返回的結果，作為新的輸入參數，傳入到subscriber的next方法里：

最終執行調用subscribe時傳入的箭頭函數：

再看另一個例子：使用map優雅地消費一個API：

const http$ : Observable<Course[]> = this.http.get('/api/courses');http$.pipe(tap(() => console.log('HTTP request executed')),map(res => Object.values(res['payload']))).subscribe(courses => console.log("courses", courses));

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的rxjs里的Observable对象和map配合的一个用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。