Javascript RxJS 中的 `map` 方法是什么意思？

What does the `map` method mean in RxJS?

提问by yaquawa

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

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

I have a hard time understanding the mapmethod of Observable. The Arrayversion of mapis really simple and straightforward. I have no idea about what exactly the mapmeans in case of a Observable(and why does it have a alias named select?!).

我有一个很难理解的地图的方法Observable。的Array版本map非常简单明了。我不知道 a 的确切map含义Observable（以及为什么它有一个名为 的别名select？！）。

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

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

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.

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

I don't understand mapin 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-eventfrom the event-stream of #btn".

我不明白map在event. 例如，下面的代码完全符合我的预期。我认为这段代码是：“click-event从事件流中收听#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);
});

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

我的想法是使用 将map一个点击事件集合转换为另一个事件集合集合。该filter很容易理解，它只是作为字filter的手段，采取事件只有我有兴趣，并跳过其他人。但是map在 的上下文中event呢？如果它意味着“将一个集合转换为另一个集合”就像数组版本一样，为什么#btn单击时它仍然会触发？？

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

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

回答by Brandon

mapworks exactly the same for Observables as it does for arrays. You use mapto 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.

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

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

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

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 functionsfor an observable:

您可以对 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]

This is possible because RxJs observables implement the array operators like mapand filterto 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.

这是可能的，因为 RxJs observables 实现了数组运算符，map并且filter具有与数组完全相同的语义。如果您知道它们如何用于数组，那么您就知道它们如何用于 observable。

This trick is the result of the dual nature of observables and enumerables.

这个技巧是observables 和 enumerables 双重性质的结果。

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.

如果您完成了正在查看的交互式教程，它实际上会引导您完成此过程。我相信它通过为数组编写映射运算符开始，然后在以后的教程中将 observable 作为源。

P.S. It is an alias for selectbecause 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 IObservableis 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).

PSselect由于它的历史，它是一个别名：Reactive Extensions 最初是在 .NET 中实现的，后来被移植到其他语言中。Rx.NET 使用的运算符与 .NET 的 LINQ 使用的运算符相同（因为IObservable是 的对偶IEnumerable）。LINQ 的 map 运算符被称为Select（并且它的过滤器运算符被称为Where）。这些名称来自 LINQ 的起源。构建 LINQ 时的目标之一是使用 C# 编写数据库查询成为可能。因此，他们为许多运算符采用了 SQL 命名约定（LINQ SELECT 直接映射到 SQL SELECT，LINQ WHERE 映射到 SQL WHERE 等）。

回答by Code-EZ

Map in Rxjs used for projection, means you can transform the array in to entirely new array. In order to understand how Map works , we can implement our own map function using plain javascript.

Rxjs 中的 Map 用于投影，意味着您可以将数组转换为全新的数组。为了理解 Map 是如何工作的，我们可以使用普通的 javascript 实现我们自己的 map 函数。

Array.prototype.map = function(projectionFunction){
var results=[];
this.forEach(function(item) {
results.push(projectionFunction(item));
});
return results;
};

You can see I have written a map function which accepts an anonymous function as a parameter. This will be your function to apply the projection to transform the array. Inside the map function you can see iterating each item in a array , call the project function by passing each item and finally the result of the projection function will push to the results array.

你可以看到我写了一个 map 函数，它接受一个匿名函数作为参数。这将是您应用投影来转换数组的函数。在 map 函数内部，您可以看到迭代数组中的每个项目，通过传递每个项目调用 project 函数，最后将投影函数的结果推送到 results 数组。

JSON.stringify([1,2,3].map(function(x){return x+1;}))

Output

输出

[2,3,4]