RxJS 是一个面向数据流编程的工具库，它提供了一系列的操作符，可以帮助前端开发者更加优雅地处理数据流。其中，from 操作符是 RxJS 中比较常用的一个操作符，它可以将 JS 数组、Promise、可迭代对象以及类数组对象转换为一个可观察对象，然后我们就可以使用一系列的操作符来处理这个数据流了。
from 的基本用法
from 操作符的基本语法如下：
from<T>(input: ObservableInput<T>, scheduler?: SchedulerLike): Observable<T>
其中，input 参数可以是一个 JS 数组、Promise、可迭代对象或者类数组对象，它会将这个数据源转换为一个可观察对象 Observable<t>，scheduler 参数用来指定可观察对象发送数据的机制。
下面是一个简单的示例，我们将一个数组转换为一个可观察对象：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ----- ----- - --- -- --- ----- ---------- - ------------ ---------------------- ----- ----- -- ------------------- --------- -- -- ----------------------- ---
运行上面的代码，我们会发现控制台输出了数组中的每一个元素，然后输出了 complete，表示数据流已经结束了。
from 与其他操作符的结合使用
from 操作符还可以与其他操作符结合使用，来处理更加复杂的数据流。比如我们可以使用 map 操作符来对数据流进行映射，filter 操作符来对数据流进行过滤，merge 操作符来将多个数据流合并等等。
还是以上面的例子为基础，我们对数组中的每个元素进行平方操作，并且只返回能被 3 整除的元素：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ----- - --- -- --- ----- ---------- - ----------------- --------- -- ----- - ------- ------------ -- ----- - - --- -- -- ---------------------- ----- ----- -- ------------------- --------- -- -- ----------------------- ---
运行上面的代码，我们会发现控制台输出了 9，表示只有 3 能被 3 整除，并且 3 的平方是 9。
from 的高级用法
除了基本用法和与其他操作符的结合使用，from 操作符还有一些比较高级的用法，可以帮助我们更好地处理数据流。
发送多个值
from 操作符默认情况下只能发送一个值，但是我们可以通过数组或者可迭代对象来一次性发送多个值。比如下面这个例子，我们使用 from 发送了一个数组和一个可迭代对象：
-- -------------------- ---- -------
------ - ---- - ---- -------
----- ----- - --- -- ---
----- -------- - -
-------------------- -
----- --
----- --
----- --
-
--
----- ---------- - ------------ -----------
----------------------
----- ----- -- -------------------
--------- -- -- -----------------------
---运行上面的代码，我们会发现控制台输出了两次，第一次输出了数组，第二次输出了可迭代对象。如果想要一次性发送多个值，我们可以在 from 的参数中加上 spread 运算符：
-- -------------------- ---- -------
------ - ---- - ---- -------
----- ----- - --- -- ---
----- -------- - -
-------------------- -
----- --
----- --
----- --
-
--
----- ---------- - --------------- --------------
----------------------
----- ----- -- -------------------
--------- -- -- -----------------------
---这样就可以一次性发送数组和可迭代对象中的所有值了。
发送值和结束信号
from 操作符还可以发送一个值和一个结束信号，表示数据流结束了。这里的结束信号可以是 Observable 对象，也可以是 Promise 对象。比如下面这个例子，我们将一个 Promise 对象转换为可观察对象，然后在 Promise 对象 resolve 之后，发送结束信号：
-- -------------------- ---- -------
------ - ---- - ---- -------
----- ------- - --- --------------- -- -
------------- -- -
-----------------
-- ------
---
----- ---------- - --------------
----------------------
----- ----- -- -------------------
--------- -- -- -----------------------
---运行上面的代码，我们会发现控制台输出了 hello，然后 1 秒后又输出了 complete，表示数据流已经结束了。
总结
通过本篇文章的介绍，我们详细地学习了 RxJS 中的 from 操作符，包括基本用法、与其他操作符的结合使用、高级用法等等，希望对您有所帮助。在实际开发中，我们可以根据具体的业务场景来选择不同的操作符，来更加高效地处理数据流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645caa94968c7c53b0f183f3