在 RxJS 中，有许多操作符用于处理流（Observable），其中包括 concat 和 concatMap。这两个操作符都可以用于将多个流合并成一个流，但它们的实现方式略有不同。
concat 操作符
concat 操作符用于将多个流按顺序合并成一个流，每个流依次发出其所有值，直到完成后再订阅下一个流。下面是一个示例：
// javascriptcn.com 代码示例
import { of, concat } from 'rxjs';
const source1$ = of(1, 2, 3);
const source2$ = of(4, 5, 6);
const source3$ = of(7, 8, 9);
const result$ = concat(source1$, source2$, source3$);
result$.subscribe(value => console.log(value));
// 输出：1, 2, 3, 4, 5, 6, 7, 8, 9在上面的示例中，我们创建了三个流 source1$、source2$ 和 source3$，然后使用 concat 操作符将它们合并成一个流 result$。当订阅 result$ 时，它会依次发出 source1$、source2$ 和 source3$ 的所有值。
需要注意的是，concat 操作符会等待前一个流完成后再订阅下一个流，因此如果前一个流永远不完成，后面的流就永远不会订阅。因此，我们需要确保每个流都能正常完成。
concatMap 操作符
concatMap 操作符也可以将多个流合并成一个流，但它的实现方式略有不同。它会将每个值映射成一个新的流，并将这些流按顺序合并成一个流。下面是一个示例：
// javascriptcn.com 代码示例
import { of } from 'rxjs';
import { concatMap } from 'rxjs/operators';
const source$ = of(1, 2, 3);
const result$ = source$.pipe(
concatMap(value => of(value * 2))
);
result$.subscribe(value => console.log(value));
// 输出：2, 4, 6在上面的示例中，我们创建了一个流 source$，它发出三个值 1、2 和 3。然后，我们使用 concatMap 操作符将每个值映射成一个新的流 of(value * 2)，并将这些流按顺序合并成一个流 result$。当订阅 result$ 时，它会依次发出每个值的两倍。
需要注意的是，concatMap 操作符会等待前一个流完成后再映射下一个值，因此如果映射的流永远不完成，后面的值就永远不会映射。因此，我们需要确保映射的流能正常完成。
总结
在 RxJS 中，concat 和 concatMap 操作符都可以用于将多个流合并成一个流，但它们的实现方式略有不同。concat 操作符按顺序合并多个流，而 concatMap 操作符将每个值映射成一个新的流，然后按顺序合并这些流。需要注意的是，这两个操作符都会等待前一个流完成后再处理下一个流或值，因此我们需要确保每个流都能正常完成。
在实际应用中，我们可以根据需要选择使用哪个操作符。如果我们需要依次处理多个流，可以使用 concat 操作符；如果我们需要将每个值映射成一个新的流，并按顺序处理这些流，可以使用 concatMap 操作符。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b39877d4982a6eb59404f