在 RxJS 中，tap 操作符被用于在 observable 中添加附加的副作用操作，例如：调试、记录日志、修改值等。tap 操作符不会改变 observable 数据流，而是使副作用操作可观测。
什么是 tap 操作符
在 RxJS 中，tap 操作符的作用是在 observable 数据流中添加非破坏性的副作用操作。它通常用于跟踪 observable 中的值，并执行一些副作用代码，例如：记录日志信息、调试等。tap 操作符不会改变 observable 的数据流，而是对 observable 进行观察，对副作用执行操作。
以下是 tap 操作符的语法：
source.pipe(
tap((x) => {
// 这里是副作用操作
})
)在上面的示例中，tap 操作符接受一个函数参数，它将在 observable 发出数据时被调用。这个函数定义了我们要执行的副作用操作。
如何使用 tap 操作符
我们可以在 observable 数据流中使用 tap 操作符来添加副作用操作。下面是一些使用 tap 操作符的示例：
打印日志
可以使用 tap 操作符打印 observable 数据流中的值，以便跟踪数据流变化。
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';
const source = of(1, 2, 3, 4);
const example = source.pipe(
tap(x => console.log(`当前值为 ${x}`))
);
example.subscribe();在这个示例中，我们创建了一个 observable，它发出数字 1,2,3 和 4。我们使用 tap 操作符打印了 observable 的值，并将其订阅。
在控制台中，我们将看到输出：
当前值为 1 当前值为 2 当前值为 3 当前值为 4
修改值
我们可以使用 tap 操作符来修改 observable 数据流中的值。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---- --- - ---- -----------------
----- ------ - ----- -- -- ---
----- ------- - ------------
----- -- -------------------------
----- -- - - ----
----- -- --------------------------
--
--------------------在这个示例中，我们创建了一个 observable，它发出数字 1,2,3 和 4。使用 tap 操作符我们打印了原始值，然后使用 map 操作符将值加上 10，并在 tap 操作符中打印修改后的值。最后我们订阅了 observable。
在控制台中，我们将看到输出：
原始值：1 修改后的值：11 原始值：2 修改后的值：12 原始值：3 修改后的值：13 原始值：4 修改后的值：14
总结
在 RxJS 中，tap 操作符是一个用于添加副作用操作的工具。它不改变 observable 的数据流，而是使副作用操作可观测。使用 tap 操作符，我们可以添加调试、日志记录和值修改等操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a4dbb4add4f0e0ffd3526b