[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 ...
随机推荐
- 用户交互和if条件判断、嵌套
#a=input("提示语“)#接受的数据类型是字符串str#提示用户输入姓名 # a=input("请输入姓名") print(a) '''输出结果:请输入姓名小明 姓 ...
- 批量下载ts视频文件
第一步 使用chrome 按F12进入开发模式,拖动视频进度条到视频结束: 然后找到.m3u8以结尾的文件并保存为文本文件. 第二步 点开查看里面是否存在如下以ts结尾的文件内容 ...... /20 ...
- 写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度
import java.util.Scanner; /** * [程序38] * * 题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. * * @author Jame ...
- 剑指Offer(Python)
014-链表中倒数第k个结点 用快慢指针:p2比p1先走到k:间隔了k-1)步,然后再一起走,当p2为最后一个时,p1就为倒数第k个数 class ListNode: def __init__(sel ...
- 【传智播客】Libevent学习笔记(二):创建event_base
目录 00. 目录 01. 简介 02. 创建默认的event_base 03. 创建复杂的event_base 3.1 event_config_new函数 3.2 event_base_new_w ...
- Brackets POJ - 2955
解法 区间dp例题,每次枚举分段点的时候先更新如果开始到结束区间端点有闭合的括号,那么dp[start][end]=dp[start+1][end-1]+2其他照常枚举即可 代码 #include & ...
- 数组合并--php
常用的合并数组方法有以下几种: 1 array_merge 2 '+' 3 array_merge_recursive 下面是一段对比的代码 $array1 = array(2,4," ...
- 文本三剑客之grep
接受正则表达式,按行匹配,将会过滤出匹配的所有行 格式: grep [OPTION]... PATTERN [FILE]... 可以看出,grep后可以同时接多个文件 选项OPTIO ...
- 关键css
参考: 掘金-JS和CSS的位置对资源加载顺序的影响 起舞-什么是关键CSS 有兴趣也可以看看这里一篇关于页面加载的文章.以上掘金那篇文章说css的加载不会影响其他资源的下载,但是我测试了一下,发现是 ...
- LeetCode(237)Delete Node in a Linked List
题目 Write a function to delete a node (except the tail) in a singly linked list, given only access to ...