RxJS 是一个函数式编程库，可以简化异步编程、事件驱动和响应式编程。在 Angular 2 中， RxJS 已经成为了必不可少的一部分。本文将介绍 Angular 2 中常用的 RxJS 操作符，包括操作符的定义、用法和示例代码，帮助开发人员更加深入地了解 RxJS，从而更好地实现 Angular 2 应用程序。
map 操作符
map 操作符会将上游 Observable 中发出的每个项都映射成一个新值，然后将这些新值发出到下游 Observer 中。下面是一个例子：
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; const numbers = Observable.of(1, 2, 3); const squaredNumbers = numbers.map((x: number) => x * x); squaredNumbers.subscribe(x => console.log(x));
上面的代码中，我们创建了一个 Observalbe 对象 numbers，它包含了三个整数：1、2、3。然后我们使用 map 操作符将每个整数都平方，并将结果存储在另一个 Observable 对象 squaredNumbers 中。最后，我们订阅 squaredNumbers，并在控制台中打印出了它的每个发射项。
filter 操作符
filter 操作符会将上游 Observable 中发出的每个项都进行过滤，只保留符合条件的项，然后将这些符合条件的新值发出到下游 Observer 中。下面是一个例子：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------------ ------ --------------------------- ----- ------- - ---------------- -- -- -- --- ----- ----------- - ------- ----------- ------- -- - - - --- --- ----------------------- -- ----------------展开代码
上面的代码中，我们创建了一个 Observalbe 对象 numbers，它包含了五个整数：1、2、3、4、5。然后我们使用 filter 操作符将只保留所有偶数，并将结果存储在另一个 Observable 对象 evenNumbers 中。最后，我们订阅 evenNumbers，并在控制台中打印出了它的每个发射项。
debounceTime 操作符
debounceTime 操作符会将上游 Observable 中发出的值进行缓冲，然后丢弃发射速率过快的值，仅保留停顿时间内的最后一个发射项，然后将最后一个发射项发出到下游 Observer 中。下面是一个例子：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------------ ------ --------------------------------- ----- ----------- - ---------------------------------------- ----- ----- - --------------------------------- --------- ----- ---------- - ----- -------- -------------- -- --------------- -------------------- -------------------------- -- --------------------展开代码
上面的代码中，我们获取了一个搜索输入框元素，并将它们转换为 Observable 对象 keyup。然后我们使用 map 操作符将每个键盘事件转换成文本输入，并用 debounceTime 操作符丢弃了发射速率过快的键盘事件。最后，我们订阅 searchText，并在控制台中打印出了文本输入的内容。
switchMap 操作符
switchMap 操作符会将上游 Observable 中发出的每个值都转换为一个新的 Observable 对象，并切换到新的 Observable 对象。下面是一个例子：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----- -------- - ---- ---------------- ------ - ---------- - ---- ------------------ ------ ------------------------------ ------------ --------- --------- --------- - ---- ----------- ------ -- ------------- - ----------------------------- - -- ------ ----- ------------ - -------------- ----------------------- ------------------- ----- ----- - - ------------ ------- - --- ------ - ------------------------------------------------------- ------------------ - --------------------- ---------- --------- -- ------------------ - -展开代码
上面的代码中，我们创建了一个 Angular 2 组件，并定义了一个 search 方法，接收搜索关键字作为参数。在 search 方法中，我们使用 http.get 方法发送请求到 GitHub 开放 API，获取所有以搜索关键字为关键词的代码库，并将结果转换成 json 格式。然后我们使用 switchMap 操作符切换到新的 Observable 对象，并将最终的搜索结果存储在 searchResults 中。最后，我们将 searchResults 绑定到组件的模板中，使用 async 管道符异步地显示搜索结果。
总结
本文介绍了 Angular 2 中常用的 RxJS 操作符，包括 map、filter、debounceTime 和 switchMap。通过这些操作符的实际应用案例，可以更加深入地了解 RxJS，为开发 Angular 2 应用程序提供更好的指导意义。开发人员可以根据实际业务需求，选择合适的操作符，并将其应用到异步编程、事件驱动和响应式编程中，从而提高代码的可读性、可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9f25fadd4f0e0ff27dad8
