引言
在使用 RxJS 进行响应式编程的过程中，有时候需要对一些特定场景的操作进行通用化，避免重复的代码，此时我们就可以使用自定义操作符。本文将介绍如何在 RxJS 中创建自定义操作符，以及具体的实现方式，并提供相关示例代码。
什么是 RxJS 操作符
RxJS 是一个非常强大的响应式编程库，它提供了许多可组合的操作符（operator），用于在流上执行各种各样的操作。操作符既可以是静态的，也可以是实例化的。静态操作符一般作用于 Observable 类本身，例如：创建、转换、合并等操作；而实例化操作符则作用于 Observable 实例上，例如：map()、filter()、takeUntil() 等等。
创建自定义操作符的方法
要创建自定义操作符，需要定义一个函数，该函数必须返回另一个函数，该函数接收 Observable 对象作为参数，并且返回新的 Observable 对象。这个返回的函数就是自定义操作符。
以下是创建自定义操作符的基本模板：
function myOperator(param1, param2) {
return function(source$) {
// 在 source$ 上做一些操作
return result$;
}
}自定义操作符接收两个参数 param1 和 param2，并返回一个函数。这个返回的函数接收一个源 Observable 对象 source$，并进行一些自定义的操作，并最终返回一个新的 Observable 对象 result$。
自定义操作符实现示例
下面是一个简单的示例，创建了一个自定义操作符来计算连续两个数之和的平均值：
// javascriptcn.com 代码示例
import { Observable } from 'rxjs';
function average() {
return function(source$) {
return new Observable(observer => {
let sum = 0;
let count = 0;
const subscription = source$.subscribe({
next(value) {
sum += value;
count++;
if (count === 2) {
observer.next(sum / 2);
sum = 0;
count = 0;
}
},
error(error) {
observer.error(error);
},
complete() {
if (count > 0) {
observer.next(sum / count);
}
observer.complete();
}
});
return () => {
subscription.unsubscribe();
};
});
};
}
const source$ = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
source$.pipe(
average()
).subscribe(value => console.log(value)); // 输出: 1.5, 2.5在上面的示例中，我们使用 average() 函数创建了一个自定义操作符。这个操作符用于计算每连续两个数之和的平均值。我们首先通过源 Observable 对象 source$ 订阅了三次数据值：1，2 和 3。随后，在我们的自定义操作符中进行了计算，并将结果发送到目标 Observable 对象 result$ 中。
最后，我们使用 pipe() 函数将自定义操作符应用于源 Observable 对象中，执行其中的操作并输出结果。在此示例中，我们预期的输出结果是 1.5 和 2.5，由于它们是相邻两个数之和的平均值。
总结
本文介绍了 RxJS 中创建自定义操作符的方法，并提供了一个实际示例。当你需要对一些通用的、重复的操作进行代码重构时，可以使用自定义操作符，使代码更加简洁、清晰。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65291a5e7d4982a6ebba9eed