RxJS 中的 `map` 方法是什么意思? [英] What does the `map` method mean in RxJS?

问题描述

我正在通过阅读本教程学习 RxJS http://reactive-extensions.github.io/learnrx/.

I'm learning RxJS by reading this tutorial http://reactive-extensions.github.io/learnrx/.

我很难理解地图 Observable 的方法.map 的Array 版本非常简单明了.我不知道 map 在 Observable 的情况下究竟意味着什么(以及为什么它有一个名为 select 的别名?！).

I have a hard time understanding the map method of Observable. The Array version of map is really simple and straightforward. I have no idea about what exactly the map means in case of a Observable(and why does it have a alias named select?!).

这是文档告诉我的.可能对大多数初学者没有帮助...

Here is what the documentation told me. Might not be helpful for most beginners...

通过合并元素的索引，将可观察序列的每个元素投影到新的形式中.这是 select 方法的别名.

Projects each element of an observable sequence into a new form by incorporating the element's index. This is an alias for the select method.

我不理解 event 上下文中的 map.例如，下面的代码完全符合我的预期.我认为这段代码是:从 #btn 的事件流中收听 click-event".

I don't understand map in the context of event. For example, the code below works exactly what I expected. I thought of this piece of code as : "Listen to the click-event from the event-stream of #btn".

var btnClicks, observable;

btnClicks = Rx.Observable.fromEvent($('#btn'), "click");

observable = btnClicks.subscribe(function(e) {
	console.log(e);
});

但是当它变成这样时会发生什么??

But what happens when it becomes to this??

var btn2Clicks, btnClicks, observable;

btnClicks = Rx.Observable.fromEvent($('#btn'), "click");

btn2Clicks = Rx.Observable.fromEvent($('#btn2'), "click");

observable = btnClicks.map(function(e) {
  return btn2Clicks;
}).subscribe(function(e) {
  console.log(e);
});

我的想法是使用 map 将一个点击事件集合转换为另一个事件集合集合.filter很容易理解，就像filter这个词的意思，只取我感兴趣的事件，跳过其他的.但是 event 上下文中的 map 怎么样?如果它意味着将一个集合转换为另一个集合"就像数组版本一样，为什么在单击 #btn 时它仍然会触发??

What I thought is use the map to transform a collection of a click-event to another collection of event-collection. The filter is easy to understand, it just as the word filter means, take the event only I interested, and skip others. But how about the map in the context of event? If it means 'transform a collection to another ones' just as the array version, why it still fires when #btn clicked??

我的意思是我已经将它映射到另一个集合，现在它不再是 #btn 的点击事件的集合，而是一个新的集合......但它仍然在 #btn 时触发code>#btn 点击了这对我来说没有意义.

I mean I'v mapped it to another collections, now it's no longer a collection of click-event of #btn but it's a new collection of something... But it still fires when #btn clicked which not make sense for me.

推荐答案

map 对 Observables 的工作方式与对数组的工作方式完全相同.您使用 map 将项目集合转换为不同项目的集合.如果您将 Observable 视为项目的集合(就像数组也是项目的集合)，至少从观察者的角度来看，这会有所帮助.

map works exactly the same for Observables as it does for arrays. You use map to transform a collection of items into a collection of different items. It helps if you think of an Observable as a collection of items (just like an array is also a collection of items), at least from the observer's point of view.

例如，将您编写的这 2 个方法用于某些数组:

For example, take these 2 methods that you wrote to use with some arrays:

function multiplyByTwo(collection) {
    return collection.map(function (value) {
        return value * 2;
    });
}

function removeZeroes(collection) {
    return collection.filter(function (value) {
        return value !== 0;
    });
}

var a = [1, 2, 3, 4, 0, 5];
var b = multiplyByTwo(a); // a new array [2, 4, 6, 8, 0, 10]
var c = removeZeroes(b); // a new array [2, 4, 6, 8, 10]

您可以将这些相同的函数用于可观察对象:

You can use these same functions for an observable:

var a = Rx.Observable.of(1, 2, 3, 4, 0, 5);
var b = multiplyByTwo(a); // a new observable [2, 4, 6, 8, 0, 10]
var c = removeZeroes(b); // a new observable [2, 4, 6, 8, 10]

这是可能的，因为 RxJs observables 实现了像 map 和 filter 这样的数组操作符，以具有与数组完全相同的语义.如果您知道它们如何处理数组，那么您就知道它们如何处理 observable.

This is possible because RxJs observables implement the array operators like map and filter to have the exact same semantics as they do for arrays. If you know how they work for arrays, then you know how they work for observables.

这个技巧是 双重性质的结果可观察对象和可枚举对象.

如果您完成了正在查看的交互式教程，它实际上会引导您完成此过程.我相信您首先要为数组编写映射运算符，然后在后面的教程中将 observable 作为源代码.

If you work through the interactive tutorial you are viewing, it actually walks you through this process. I believe it starts you off by writing map operators for arrays and then in a later tutorial sneaks an observable in as the source.

附言它是 select 的别名，因为它的历史:Reactive Extensions 首先在 .NET 中实现，后来移植到其他语言.Rx.NET 使用与 .NET 的 LINQ 相同的运算符(因为 IObservable 是 IEnumerable 的对偶).LINQ 的映射运算符称为 Select(其过滤运算符称为 Where).这些名称来自 LINQ 的起源.构建 LINQ 时的目标之一是使在 C# 中编写数据库查询成为可能.因此，他们为许多运算符采用了 SQL 命名约定(LINQ SELECT 直接映射到 SQL SELECT，LINQ WHERE 映射到 SQL WHERE 等).

P.S. It is an alias for select because of its history: Reactive Extensions was first implemented in .NET and later ported to other languages. Rx.NET uses the same operators that are used by .NET's LINQ (since IObservable is the dual of IEnumerable). LINQ's map operator is known as Select (and its filter operator is known as Where). These names come from LINQ's origination. One of the goals when LINQ was built was to make it possible to write database queries in C#. Thus they adopted SQL naming conventions for many of the operators (LINQ SELECT maps directly to SQL SELECT, LINQ WHERE maps to SQL WHERE, etc).

这篇关于RxJS 中的 `map` 方法是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！