这次来介绍一下 RxJS ，不会过于深入的讲解，因为我自己也是个半吊子，本文旨在让你对 RxJS 有个整体的认识，并能够体会到 RxJS 在部分场景下的优势。

读过我之前的文章应该能了解到，我在介绍一些此类内容的时候，喜欢用 Why 、 What 、 How 这样的方式。不过这次可能要换一种方式了，因为在我看来 RxJS 更多的是一种思维方式的转变，就像在前端没有出现 MV* 框架之前，我们的思维还是拿着数据去更新DOM，而有了这些框架，操作 DOM 的思维方式已经逐渐被替代掉了。

首先我们来看一个例子，给定一个数组 [1, 'qq', 3, '奇奇', 17, '77'] 将数组中的数字乘以2然后再相加求和，你可能会很快想到下面的解法：

const arr: Array<string | number> = [1, 'qq', 3, '奇奇', 17, '77'];
let sum = 0;

for (const item of arr) {
  const n = parseInt(item as string, 10);
  if (!Number.isNaN(n)) {
    sum += n * 2
  }
}

代码很简单，但是可读性就差了很多，我们再用函数式编程的方式改造一下：

let sum = arr
  .map(n => parseInt(n as string, 10))
  .filter(n => !Number.isNaN(n))
  .map(n => n * 2)
  .reduce((prve, current) => prve + current)

第一种方式叫命令式，而第二种则叫声明式。从命令式到声明式，便是一种思维模式的转换。同样的例子还有 SQL 和 ORM。我们通过仔细观察可以发现，在命令式编程中，我们是迫不及待，想尽一切办法的想要得到最终的结果。而在声明式中，我们则是通过一系列的转化，有条不紊的得到最终结果。那这个例子和我们要介绍的 RxJS 又有什么关系呢？请再次阅读我对声明式的评价并理解它，那在接下来的内容中，你就能很好的理解 RxJS 了。

首先简单介绍 RxJS 的由来。2012年微软提出并开源了 ReactiveX(Reactive Extensions) 编程模型，目标是提供一致的编程接口，帮助开发者更方便的处理异步数据流。目前已有 c#、c++、java、JavaScript等多个版本实现。而 RxJS 则是 ReactiveX 的 JavaScript 版本。ReactiveX 有三个非常重要的特点: 观察者模式、Iterator、函数式编程。

https://www.zhihu.com/topic/20036245/top-answers
https://blog.techbridge.cc/2017/12/08/rxjs/
https://mcxiaoke.gitbooks.io/rxdocs/content/Intro.html
https://rxjs-cn.github.io/learn-rxjs-operators/
https://zhuanlan.zhihu.com/p/23331432
https://www.jianshu.com/p/5d01341599e9
https://segmentfault.com/a/1190000012252368
https://zhuanlan.zhihu.com/p/23331432
https://www.jianshu.com/p/16be96d69143

Observable
Observer

操作符分类