什么是 RxJS
RxJS 是一个处理异步数据流的库，它实现了观察者模式和迭代器模式。 RxJS 的核心是 Observable， 它提供了一种处理异步和基于事件的程序的方式，并且可以和 Angular6 打扮得很好。
Angular6 中的 RxJS 新特性
- 适用于 TypeScript
RxJS 是使用 TypeScript 编写的，它提供了丰富的类型定义和更好的语法提示，最大限度地提高了开发效率和可靠性。
- 新的操作符
在 RxJS 6 中，一些不常用的操作符被移除了，一些常见的操作符进行了重构，并且添加了一些新的操作符。这些新的操作符更加精简且易于理解并使用。
例如:
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------- ------------------ - --------------------- -- - ------------ ------------ ------------ ------------ ------------ --------------- --- ----- -------- ------------------ - ------------ ------- -- --- - ---- -- ------ ---------- -- --- - - --- -- -- ---- -- --------------------- -- ------------------ -- -----
在上述代码中， map 和 filter 操作符在 RxJS 6 中有了大幅优化，并且操作符的调用方式也变得更加简单。
- 操作符管道优化
在 RxJS 6 中，操作符的管道被优化，并且操作符的链可以更好地组合和适配。这使得开发者可以更加清晰地组织操作符的顺序，方便阅读和管理代码。
例如：
source.pipe( map(val => val + 10), filter(val => val % 2 === 0) ).subscribe(val => console.log(val)); // 12，14
在上述样例中，通过直接将操作符拼起来可以更好的阅读 RxJS 的操作流程。
RxJS 的使用
- 安装依赖
安装最新版的 RxJS 依赖：
npm install rxjs
- 添加引用
在你的代码中添加 RxJS 引用：
import { Observable } from 'rxjs';- 创建并使用 Observable
RxJS 的核心概念之一是 Observable。在你的代码中创建一个 Observable 实例，你可以使用 Observable 类的静态 create 方法：
const source: Observable<number> = Observable.create(obs => {
obs.next(1);
obs.next(2);
obs.next(3);
obs.next(4);
obs.next(5);
obs.complete();
});在示例代码中可见，提供的 create 方法返回一个 Observable 实例，并定义了一个函数，用于发送基于 Observable 的值。
- 添加操作符
RxJS 提供了许多操作符，例如 filter， map，reduce 等等。使用管道符数这些操作符可以很方便的将它们串联起来，以达到预期的效果。
例如：
source.pipe( map(val => val + 10), // 将数字加10 filter(val => val % 2 === 0) // 返回偶数 ).subscribe(val => console.log(val)); // 12，14
上述代码中，通过使用管道符连接 map 和 filter 操作符，实现了 Observable 中的数据的过滤和修改。
结论
本篇文章介绍了 RxJS 在 Angular6 中的新特性以及使用 RxJS 的一些最佳实践，包含示例代码，希望能够对你学习 Angular6 中的 RxJS 有所帮助。使用 RxJS 手写 javaScript 代码,能够帮助我们更加精简、优化和易于维护的 JavaScript 代码方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6444ac5c563ced580fedb