Verstehen RXJS Flatmap, FlatmapLatest in C# Begriffe

Question

Ich bin überwiegend C# Entwickler erweitert meinen Horizont in Javascript und stieß kürzlich auf eine Bibliothek namens RXJS. Ich würde gerne verstehen, wie Map, Flatmap, FlatmapLatest sich beziehen und gibt es irgendwelche Entsprechungen in C# .Net?

Answer 1

RxJS ist Teil der Reactive Extensions-Familie, die in verschiedenen Sprachen implementiert ist, einschließlich C# (da Rx jetzt ein Microsoft-Projekt ist).

Also, ja, es gibt Äquivalenzen in C# ... :-)

Die Konzepte der Karte, flatMap und flatMapLatest sind nicht offensichtlich. Ich bin selbst ein Anfänger bei RxJS, also hoffe ich, dass ich es richtig verstehe ...

map nimmt die Objekte des Observablen und mappen sie (transformieren sie) in etwas anderes. Z.B. könnte eine arithmetische Operation für Zahlen sein, ein primitives Objekt in ein Objekt transformieren oder einen Schlüssel aus dem Objekt entfernen, etc.

flatMap hat mehrere Varianten, aber im Grunde genommen benötigt es eine Funktion, die eine Observable von jedem Element der beobachtbaren Quelle zurückgibt. Dies erzeugt einen Stream von Streams (wobei stream = beobachtbar = Sequenz von Items) ist, also flacht map diese in einen einzigen Stream ab/beobachtbar, wo alle Items in einer Sequenz sind.
Mmm, verwirrende Erklärung, ich fürchte ... Lass uns Ascii Murmeln erklären.

--A------------------- // First stream 
--a1----a2----a3------ // flatMap's function result 
-----B---------------- // Second stream 
-----b1----b2----b3--- // flatMap's function result 
--a1-b1-a2-b2-a3-b3--- // flatMap 

flatMapLatest ist ein flatMap, wo nur die Elemente des aktuellen beobachtbaren emittiert werden. Wenn ein neues Observable kommt, werden die Werte des vorherigen ignoriert.

--A------------------- // First stream 
--a1----a2----a3------ // flatMapLatest's function result 
-----B---------------- // Second stream 
-----b1----b2----b3--- // flatMapLatest's function result 
--a1-b1----b2----b3--- // flatMapLatest 

[EDIT] ich einige Code besser gemacht, die Konzepte zu verstehen ... Zeige flatMapLatest nicht offensichtlich war ... Ich sah es auf Ajax-Anfragen verwendet: Wenn ein neuer emittiert wird, keine Notwendigkeit, das/die vorherige (n) berücksichtigen.

Demo: Ein Klick auf einen beliebigen Knopf zeigt das rohe Ereignis an.

• Klicken Sie auf die erste Schaltfläche, um ein angereichertes Ereignis (mit Karte) zu sehen.
• Klicken Sie auf die zweite Schaltfläche, um eine Sequenz von 5 Ereignissen im Abstand von 1 s auszulösen (flatMap). Wenn Sie erneut klicken, bevor die Sequenz endet, sehen Sie interleaved Ergebnisse von den laufenden Observablen.
• Die dritte Schaltfläche verhält sich ähnlich, aber mit flatMapLatest wird durch einen neuen Klick die Ergebnisse der vorherigen Sequenz gelöscht.

// Generic code to display results 
 

 
var results = document.getElementById('results'); 
 
function showHTML(html) 
 
{ 
 
    results.insertAdjacentHTML('beforeend', html); 
 
} 
 
function show(text, obj) 
 
{ 
 
    showHTML("<p>" + text + (obj !== undefined ? ': ' + JSON.stringify(obj) : '') + "<p>"); 
 
} 
 
function showObject(obj) 
 
{ 
 
    show("<p>" + JSON.stringify(obj) + "<p>"); 
 
} 
 

 
// The real code 
 

 
var button1 = document.querySelector('#button1'); 
 
var button2 = document.querySelector('#button2'); 
 
var button3 = document.querySelector('#button3'); 
 
var buttonClickStream1 = Rx.Observable.fromEvent(button1, 'click'); 
 
var buttonClickStream2 = Rx.Observable.fromEvent(button2, 'click'); 
 
var buttonClickStream3 = Rx.Observable.fromEvent(button3, 'click'); 
 

 
// Raw 
 
Rx.Observable.merge(buttonClickStream1, buttonClickStream2, buttonClickStream3) 
 
    .subscribe(
 
    function(v) { show("Value", v); }, 
 
    function(e) { show("Error", e); }, 
 
    function() { show("Done"); } 
 
); 
 

 
// Map 
 
buttonClickStream1 
 
    .map(function (e, i) 
 
    { 
 
    e.id = i; // Add id 
 
    e.t = new Date(); // Add timestamp 
 
    return e; 
 
    }) 
 
    .subscribe(function(v) { show("Button 1", v) }); // Simplify: no errors, no completion 
 

 
// FlatMap 
 
buttonClickStream2 
 
    // Returns several values 
 
    .flatMap(function (e, i) 
 
    { 
 
    return Rx.Observable 
 
     .interval(1000).take(5) 
 
     .flatMap(function (x, j) { return Rx.Observable.of(i + ' ' + j) }); 
 
    }) 
 
    .subscribe(function(v) { show("Button 2", v) }); 
 

 
// FlatMapLatest 
 
buttonClickStream3 
 
    // Returns several values but keep only the last one 
 
    .flatMapLatest(function (e, i) 
 
    { 
 
    return Rx.Observable 
 
     .interval(1000).take(5) 
 
     .flatMap(function (x, j) { return Rx.Observable.of(i + ' ' + j) }); 
 
    }) 
 
    .subscribe(function(v) { show("Button 3", v) });

<button type="button" id="button1">Test map</button> 
 
<button type="button" id="button2">Test flatMap</button> 
 
<button type="button" id="button3">Test flatMapLatest</button> 
 
<div id="results"></div> 
 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.lite.js"></script>