RxJS 是一种响应式编程工具集，可以用于处理异步和基于事件的程序。
Observable 是 RxJS 中的一种数据类型，与其他数据类型不同的是，Observable 可以被订阅（subscribe），即当 Observable 发生变化时会通知订阅者，让其可以进行相应的操作。
RxJS 中有很多操作符，常见的包括 map、filter、reduce 等。这些操作符可以用于对 Observable 进行变换。其中一个很常用的操作是 map，它可以将 Observable 中的每个数据项目映射到一个新的 Observable 中去。
在使用 map 操作时，有一个常见的问题是 map 的调用顺序与 subscribe 的调用顺序不同，会导致结果不如预期。下面我们详细探讨一下这个问题以及如何解决它。
初步了解 map 和 subscribe
map 操作符可以将 Observable 中的每个数据项目映射到一个新的 Observable 中去，例如：
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
const source = from([1, 2, 3, 4, 5]);
const mapped = source.pipe(
map(val => val * 10)
);
mapped.subscribe(val => console.log(val)); // 输出 10，20，30，40，50上面的代码中，我们使用了 RxJS 的 from 函数创建了一个包含 1 到 5 的数组，将其转换为 Observable，并使用 map 操作符将每个数据项目乘以 10。然后使用 subscribe 订阅新的 Observable，当 Observable 中有数据发生变化时，就会将数据打印到控制台。
调用顺序不同导致问题
上面的代码看上去没有问题，但如果我们将 subscribe 放在 map 之前会发生什么呢？
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - --- - ---- ----------------- ----- ------ - -------- -- -- -- ---- ----- ------ - ------------ ------- -- --- - --- -- -------------------- -- ------------------ -- -- -------------- -------------------------- -- ------------------------ -- -- ---------
从上面代码的输出结果可以看出，当我们将 subscribe 放在 map 操作前面时，会输出原始数据，而不是经过变换后的新数据。
这是因为 map 操作符是对源 Observable 进行转换的，只有在新的 Observable 被订阅时，map 中的函数才会被执行，因此在原始 Observable 上订阅并不会执行这个操作。因此，源 Observable 和适用操作符（比如 map、filter 等）生成的新 Observable，是被分离的两个对象，互不影响。
解决问题的办法
为了解决上面提到的问题，我们需要先调用 map 操作符，然后再进行 subscribe。例如：
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
const source = from([1, 2, 3, 4, 5]);
const mapped = source.pipe(
map(val => val * 10)
);
mapped.subscribe(mappedVal => console.log(mappedVal)); // 输出 10，20，30，40，50这里我们先将 map 操作符调用出来，生成一个新的 Observable，然后对其进行订阅。这样就可以产生我们预期的输出了。
更深入的理解和指导意义
RxJS 中的 Observable 和操作符可以让我们更加方便地处理异步操作和事件驱动的程序。因此，深入理解和熟练掌握各种操作符的使用方法是十分必要的。
在使用 RxJS 时，要注意保障调用操作符的正确顺序，订阅 Observable 之前确保所有的操作符（包括 map、filter 等）都已经调用完毕。此外，还要注意避免对同一个 Observable 进行多次订阅，这可能会导致意外的行为和性能问题。
以下是一个关于多个操作符的示例代码：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ---- ------ - ---- ----------------- ----- ------ - -------- -- -- -- ---- ----- ------ - ------------ ---------- -- --- - - --- --- ------- -- --- - ---- -- -------------------------- -- ----------------------- -- -- -----
上述代码中，我们同时用到了 filter 和 map 操作符，首先对源 Observable 进行筛选和变换，然后进行订阅。由于我们使用了操作符，因此必须要注意它们的调用顺序，这会影响到最终的输出结果。
结论
本文详细介绍了 RxJS 中 map 和 subscribe 的调用顺序问题，给出了详细的解决方案和示例代码，并讨论了更深入理解和正确使用 RxJS 操作符的意义。当我们在编写 RxJS 中的代码时，一定要注意保障操作符的正确调用顺序，避免多次订阅同一个 Observable，并尽量遵循 RxJS 的规范和最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7ebdac5c563ced5b2b943