javascript - 了解 RxJS 的 Flatmap，C# 术语中的 FlatmapLatest

Question

我主要是 C# 开发人员，正在扩展我在 JavaScript 方面的视野，最近偶然发现了一个名为 RxJS 的库。

我想了解 Map、Flatmap、FlatmapLatest 之间的关系以及 C#.Net 中是否有任何等效项？

Answer 1

RxJS 是 Reactive Extensions 系列的一部分，它以各种语言实现，包括 C#(当然，因为 Rx 现在是 Microsoft 项目)。

所以，是的，在 C# 中有等价物...:-)

map、flatMap、flatMapLatest的概念不是很明显。我自己是 RxJS 的初学者，所以我希望我做对了......

map 获取 observable 的项目并将它们映射(转换)为其他东西。例如。可能是对数字的算术运算，将基元转换为对象或从对象中删除键等。

flatMap 有几个变体，但基本上它需要一个函数，该函数从源可观察对象的每个项目返回一个可观察对象。这形成了一个流的流(其中 stream = observable = 项目序列)，因此 flatMap 将其展平为单个流/可观察的，其中所有项目都是按顺序排列的。
嗯，令人困惑的解释，我担心......让我们做 Ascii 弹珠来解释。

--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 是一个 flatMap，其中仅发出当前可观察对象的项目。如果出现新的 Observable，则忽略前一个 Observable 的值。

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

[编辑] 我编写了一些代码以更好地理解这些概念......显示 flatMapLatest 并不明显......我看到它用于 Ajax 请求:如果发出新请求，则无需考虑之前的请求。

演示:点击任意按钮显示原始事件。

• 点击第一个按钮查看丰富的事件(带 map )。
• 点击第二个按钮以 1 秒的间隔触发一系列 5 个事件 (flatMap)。如果您在序列结束前再次点击，您会看到来自正在运行的可观察对象的交错结果。
• 第三个按钮的行为类似，但使用 flatMapLatest，新的点击会丢弃前一个序列的结果。

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