[RxJS] Implement the `map` Operator from Scratch in RxJS
While it's great to use the RxJS built-in operators, it's also important to realize you now have the knowledge to write them by yourself if needed. The mapoperator turns out to be a simple MapSubscriber which takes a function and applies it to the value passed to next.
map.js:
import { Subscriber } from "rxjs";
class MapSubscriber extends Subscriber {
constructor(sub, fn) {
super(sub);
this.fn = fn;
}
_next(value) {
this.destination.next(this.fn(value));
}
}
export const map = fn => source =>
source.lift({
call(sub, source) {
source.subscribe(new MapSubscriber(sub, fn));
}
});
multiply.js:
import { map } from "./map";
export const mul = number => map(v => v * number);
index.js:
import { from, Subscriber } from "rxjs";
import { multiply, mul } from "./multiply";
const observable$ = from([, , , , ]);
const subscriber = {
next: value => {
console.log(value);
},
complete: () => {
console.log("done");
},
error: value => {
console.log(value);
}
};
observable$.pipe(mul()).subscribe(subscriber);
observable$.pipe(mul()).subscribe(subscriber);
[RxJS] Implement the `map` Operator from Scratch in RxJS的更多相关文章
- [RxJS] Create a Reusable Operator from Scratch in RxJS
With knowledge of extending Subscriber and using source.lift to connect a source to a subscriber, yo ...
- [RxJS] Implement pause and resume feature correctly through RxJS
Eventually you will feel the need for pausing the observation of an Observable and resuming it later ...
- 条目二十四《当效率至关重要时,请在map::operator[]与map::insert之间谨慎做出选择》
条目二十四<当效率至关重要时,请在map::operator[]与map::insert之间谨慎做出选择> 当效率至关重要时,应该在map::operator[]和map::insert之 ...
- [RxJS] Use RxJS concatMap to map and concat high order observables
Like switchMap and mergeMap, concatMap is a shortcut for map() followed by a concatAll(). In this le ...
- Implement Hash Map Using Primitive Types
A small coding test that I encountered today. Question Using only primitive types, implement a fixed ...
- [RxJS] Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through
Understanding sources and subscribers makes it much easier to understand what's going on with mergeM ...
- [RxJS] Use RxJS mergeMap to map and merge high order observables
Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap( ...
- [Javascript + rxjs] Using the map method with Observable
Like an array, Observable has a map method that allows us to transform a sequence into a new Observa ...
- [RxJS] Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through
switchMap is mergeMap that checks for an "inner" subscription. If the "inner" su ...
随机推荐
- python基础一 day2 字符串操作
s.capitalize() s.upper() s.lower() s.swapcase() s.title() s.center(20,"#") s.expand ...
- Linux的Network Tunnel技术
Linux的Network Tunnel技术 概要 Linux上可以使用ip tunnel命令创建多种类型的tunnel. 在 man ip-tunnel 中可以得知以下几种类型的tunnel: MO ...
- ios 自定义URL Scheme 设计
在 iOS 里,程序之间都是相互隔离,目前并没有一个有效的方式来做程序间通信,幸好 iOS 程序可以很方便的注册自己的 URL Scheme,这样就可以通过打开特定 URL 的方式来传递参数给另外一个 ...
- SANBA服务和FTP服务
1.samba服务 Smb主要作为网络通信协议:Smb是基于cs(client/server)架构(架构还有bs,broswer/server):完成linux与windows之间的共享:linux与 ...
- Python 3.52官方文档翻译 http://usyiyi.cn/translate/python_352/library/index.html 必看!
Python 3.52官方文档翻译 http://usyiyi.cn/translate/python_352/library/index.html 觉得好的麻烦点下推荐!谢谢!
- Python数据结构--树遍历算法
''' 遍历是访问树的所有节点的过程,也可以打印它们的值. 因为所有节点都通过边(链接)连接,所以始终从根(头)节点开始. 也就是说,我们不能随机访问树中的一个节点. 这里介绍三种方式来遍历一棵树 - ...
- 洛谷 P3387 【模板】缩点 DAGdp学习记
我们以洛谷P3387 [模板]缩点 来学习DAGdp 1.这道题的流程 //伪代码 for i->n if(i未被遍历) tarjan(i) 缩点() DAGdp() 完成 首先tarjan这部 ...
- luogu2894 [USACO08FEB]酒店Hotel
跟线段树求区间最值一样每个节点维护左边开始的最大连续空房间数.右边开始的最大连续空房间数.这个区间内的最大连续空房间数 #include <iostream> #include <c ...
- xtu字符串 D. 病毒侵袭
D. 病毒侵袭 Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format: %I64d Java class nam ...
- python013 Python3 条件控制
Python3 条件控制Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块.可以通过下图来简单了解条件语句的执行过程: if 语句Python中if语句的一 ...