RxJS 中的 pluck 操作符：什么是它以及如何使用它

引言

RxJS 是一个 JavaScript 库，它使用可观察的序列来组成异步和基于事件的程序，同时为基于事件的架构提供了一个强大的工具箱。在 RxJS 中，操作符是处理可观察序列的核心。其中一个最常用的操作符是 pluck 操作符。在本文中，我们将探讨 RxJS 中的 pluck 操作符是什么，以及如何使用它。

什么是 pluck 操作符？

pluck 操作符可以从一个对象中提取指定的属性，并返回这些属性所组成的新的可观察序列。换句话说，它获取一个包含嵌套对象的可观察序列，并转换为输出一个包含所有指定属性值的序列。其语法为：

pluck<K extends keyof T>(...properties: K[]): OperatorFunction<T, T[K]>;

其中，K 代表泛型参数，keyof T 代表可以访问到的 T 类型的属性名称，OperatorFunction 是一个类型，表示操作符函数。

如何使用 pluck 操作符？

我们先看一个例子，假设我们有一个包含学生和他们的成绩的数组：

const students = [
  { name: '小明', grade: { math: 80, english: 90 } },
  { name: '小华', grade: { math: 90, english: 85 } },
  { name: '小红', grade: { math: 95, english: 92 } }
];

如果我们只想获取所有学生的英语成绩，可以使用 pluck 操作符实现：

import { from } from 'rxjs';
import { pluck } from 'rxjs/operators';

const englishGrades = from(students).pipe(pluck('grade', 'english'));

englishGrades.subscribe(grade => console.log(grade));

在上面的例子中，我们使用 from 操作符从 students 数组创建一个可观察序列，然后使用 pluck 操作符提取 grade 和 english 属性的值，最后使用 subscribe 订阅这个序列。运行这段代码，将输出以下结果：

90
85
92

深度和学习意义

pluck 操作符的实现过程虽然很简单，但它可能会有更深层次的应用。假设我们想观察一个路由对象的 url 属性的变化。为了实现这个功能，我们可以通过 RxJS 的 fromEvent 操作符创建一个路由事件的可观察序列，然后使用 pluck 操作符提取 url 属性，最后使用 distinctUntilChanged 操作符确保只有当 url 发生变化时才会触发订阅者：

import { fromEvent } from 'rxjs';
import { pluck, distinctUntilChanged } from 'rxjs/operators';

const router = {
  url: '/'
};

const routerChanges = fromEvent(window, 'popstate')
  .pipe(pluck('target', 'location', 'pathname'))
  .pipe(distinctUntilChanged());

routerChanges.subscribe(url => {
  router.url = url;
});

在上面的例子中，我们使用 fromEvent 操作符从 window 创建一个可观察序列，然后使用 pluck 操作符从事件对象中提取 url 属性，最后使用 distinctUntilChanged 操作符确保只有当 url 发生变化时才会触发订阅者。这个例子展示了 pluck 操作符的实用性和可复用性，我们可以用 pluck 操作符从任何对象中提取任何属性值。

总结

在 RxJS 中，pluck 操作符是一个提取对象属性值的常用操作符，它可以从一组嵌套的对象中提取指定的属性，然后将这些属性的值转换为一个新的可观察序列。我们可以使用 pluck 操作符跟踪对象属性值的变化，或者从数组对象中提取指定属性的值。希望本文能够帮助你更好地理解 RxJS 中的 pluck 操作符。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a5e0e0add4f0e0ffe71473