简介
RxJS (Reactive Extensions for JavaScript)，是一个基于可观察序列的编程库，它可以让我们更方便地处理异步数据流。在 RxJS 中，我们可以使用各种操作符来处理可观察序列，其中之一的操作符就是 pluck。
pluck 操作符的作用
pluck 操作符可以从可观察序列中提取一个指定的属性，将其转换成一个新的可观察序列并返回。
在 RxJS 中，可观察序列通常是一个对象或者数组，而 pluck 操作符可以提取对象或者数组中的某个属性值，并以新的可观察序列的形式返回该属性的值。如果可观察序列中的元素不是一个对象或者数组，pluck 操作符将抛出异常。
实际应用
在实际应用中，pluck 操作符经常用于提取对象的属性值，以实现数据流的精简或者数据映射的变换。下面是一个实际的案例，我们通过此案例具体了解如何使用 pluck 操作符。
假设我们有一个表单，其中包含姓名，年龄和城市三个字段，每当用户输入其中一个字段的值时，我们都需要实时更新展示在页面上的数据。
这种场景下，我们可以使用 RxJS 来实现响应式的数据流。具体来讲，我们可以将每个表单字段的变化转换成一个可观察序列，然后将这些序列合并成一个大的可观察序列。
// javascriptcn.com 代码示例
const name$ = fromEvent(nameInput, 'input').pipe(
pluck('target', 'value')
)
const age$ = fromEvent(ageInput, 'input').pipe(
pluck('target', 'value')
)
const city$ = fromEvent(cityInput, 'input').pipe(
pluck('target', 'value')
)
const values$ = combineLatest([name$, age$, city$]).pipe(
map(([name, age, city]) => ({ name, age, city }))
)
values$.subscribe(value => {
// TODO: 更新页面展示
})在上面的代码中，我们首先使用 fromEvent 操作符创建了三个可观察序列，分别对应姓名，年龄和城市三个字段。这个操作符的作用是将事件流转成可观察序列，我们使用 pluck 操作符从每个事件对象中提取了 target.value 的值。
接下来，我们使用 combineLatest 操作符将这三个可观察序列合并成一个大的序列，并使用 map 操作符将这个序列转换成一个包含三个属性的对象（即 { name, age, city }）。最后，我们对这个可观察序列进行订阅，实现更新页面展示的逻辑。
总结
在 RxJS 中，pluck 操作符可以方便地提取对象或者数组中的某个属性值，将其转换成一个新的可观察序列并返回。在实际应用中，pluck 操作符经常用于响应式的数据流处理，例如将表单字段的变化转换成一个大的可观察序列，实现自动更新页面展示的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583928fd2f5e1655de6ffc7