RxJS 中的 pluck 操作符的使用技巧

在 RxJS 中，我们可以通过使用操作符（operators）来进行各种各样的转换。其中一个常用的操作符就是 pluck 操作符，它可以帮助我们很方便地从一个对象或数组中提取指定的属性值，并把这些值转化为一个新的 Observables。

基本用法

pluck 操作符用于提取某一个对象的某个属性值，并返回一个新的 Observable。比如我们有如下一个对象：

const user = {
    name: 'John',
    age: 30,
    email: 'john@example.com'
}

我们可以通过 pluck 操作符提取 user 对象的 name 属性，示例代码如下：

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

const user$ = from([user]);
const name$ = user$.pipe(pluck('name'));
name$.subscribe(name => console.log(name)); // 输出 'John'

从上面的代码可以看出，我们需要先将 user 对象转化为一个 Observable，然后通过 pluck 操作符提取 name 属性，并将提取到的属性值发送给订阅者。

除了提取一个对象的属性值，我们也可以使用 pluck 操作符来提取数组中的对象属性值。比如我们有如下一个数组：

const users = [
    { name: 'John', age: 30, email: 'john@example.com' },
    { name: 'Tom', age: 25, email: 'tom@example.com' },
    { name: 'Jane', age: 35, email: 'jane@example.com' }
]

我们可以通过 pluck 操作符提取数组中每个对象的 name 属性，示例代码如下：

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

const users$ = from(users);
const names$ = users$.pipe(pluck('name'));
names$.subscribe(name => console.log(name)); // 输出 'John', 'Tom', 'Jane'

在上面的代码中，我们将整个 users 数组转化为一个 Observable，然后通过 pluck 操作符提取了它里面每个对象的 name 属性，并将提取到的属性值发送给订阅者。

深层属性的提取

有时候我们需要从一个对象的深层属性中提取属性值，这时候我们就需要使用 pluck 操作符的扩展用法了。比如我们有如下一个对象：

-- -------------------- ---- -------
----- ---- - -
    ----- -------
    ---- ---
    ------ -------------------
    -------- -
        ----- ---- ------
        -------- -----
    -
-
展开代码

如果我们需要从 user 对象中提取 address.city 属性的值，我们可以使用如下代码：

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

const user$ = from([user]);
const city$ = user$.pipe(pluck('address', 'city'));
city$.subscribe(city => console.log(city)); // 输出 'New York'

从代码可以看到，我们可以通过在 pluck 操作符中传入两个参数，以达到提取深层属性值的目的。如果要提取更深层次的属性，只需要在第二个参数后面继续传入更多的属性名即可。

指导意义

使用 pluck 操作符可以很方便地转换对象和数组，提取出我们需要的属性值，并且非常易于使用，这是 RxJS 中一个非常有用的操作符。随着 RxJS 越来越广泛地运用在前端开发中，学习和掌握 pluck 操作符的使用技巧对于提高我们的开发效率和代码质量也是非常重要的。

同时要注意的是，当我们需要做一些比较复杂的转换时，可能不仅仅是单纯地提取一个对象或数组中的属性值，这时候就需要多个操作符的组合使用。熟练掌握常用的操作符，能够灵活地组合使用它们，才能更好地发挥 RxJS 的强大能力。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bfd0d70c976d473a4b6ed2