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

查看:54
本文介绍了RxJS中的map方法是什么意思?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

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

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

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

  var btnClicks,可观察;btnClicks = Rx.Observable.fromEvent($('#btn'),"click");observable = btnClicks.subscribe(function(e){console.log(e);});  

但是这变成了什么呢?

  var btn2Clicks,btnClicks,可观察;btnClicks = Rx.Observable.fromEvent($('#btn'),"click");btn2Clicks = Rx.Observable.fromEvent($('#btn2'),"click");observable = btnClicks.map(function(e){返回btn2Clicks;}).subscribe(function(e){console.log(e);});  

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

我的意思是我已经将其映射到另一个集合,现在它不再是 #btn 的click-event的集合,但是它是一个新的集合...但是当 #btn 单击对我来说没有意义.

解决方案

map 对Observables的作用与对数组的作用完全相同.您可以使用 map 将项目集合转换为不同项目的集合.至少从观察者的角度来看,如果将Observable视为项的集合(就像数组也是项的集合一样),则将很有帮助.

例如,采用您编写的用于某些数组的以下两种方法:

  function multipleByTwo(collection){return collection.map(function(value){返回值* 2;});}函数removeZeroes(collection){return collection.filter(function(value){返回值!== 0;});}var a = [1,2,3,4,0,5];var b = multipliByTwo(a);//一个新数组[2、4、6、8、0、10]var c = removeZeroes(b);//一个新数组[2,4,6,8,10] 

您可以将这些相同功能用于可观察的内容:

  var a = Rx.Observable.of(1,2,3,4,0,5);var b = multipliByTwo(a);//一个新的可观察值[2,4,6,8,8,0,10]var c = removeZeroes(b);//一个新的可观察值[2、4、6、8、10] 

这是可能的,因为RxJ的可观察对象实现了像 map filter 这样的数组运算符,它们具有与数组相同的语义.如果您知道它们如何用于数组,那么您就会知道它们如何用于可观察对象.

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

如果您正在浏览的交互式教程中有内容,它实际上将引导您完成此过程.我相信它可以通过为数组编写映射运算符来开始,然后在以后的教程中偷偷摸摸地将其作为源代码.

P.S.由于它的历史,它是 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等).

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

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...

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.

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);
});

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??

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 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.

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]

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.

This trick is the result of the dual nature of observables and 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.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆