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的更多相关文章

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

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

  3. 条目二十四《当效率至关重要时,请在map::operator[]与map::insert之间谨慎做出选择》

    条目二十四<当效率至关重要时,请在map::operator[]与map::insert之间谨慎做出选择> 当效率至关重要时,应该在map::operator[]和map::insert之 ...

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

  5. Implement Hash Map Using Primitive Types

    A small coding test that I encountered today. Question Using only primitive types, implement a fixed ...

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

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

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

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

随机推荐

  1. index 定义 v-for 未使用变量 实际是没有 :key="index"

    需要有 :key="index" <Checkbox :label="item.key" :key="index" v-for=&qu ...

  2. QT5:总结篇 控件集合

    一.Layouts 二.Spacers 三.Buttons 四.Item Views(Model-Based) 五.Item Widgets(Item-Based) 六.Containers 七.In ...

  3. 什么是JavaScript框架-------share

    摘要:现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互.特别是通过不刷新页面的异步请求来返回数据或从服务器端的脚本(或数据系统)中得到响应.在这篇文章中,你将会了解 ...

  4. Ubuntu下压缩与解压各种文件的命令

    1.压缩与解压xz文件 (1)压缩 xz -z  filename (2)解压 xz -d  filename.xz 2.压缩与解压tar文件 (1)压缩 tar -cvf  filename(压缩到 ...

  5. [CF] 948A Protect Sheep

    A. Protect Sheep time limit per test1 second memory limit per test256 megabytes inputstandard input ...

  6. matlab ()的用法

    经常见到标识符+(),用法比如阵列Y().函数f()..... 时机到了,会总结一下.

  7. Django框架基础知识11-会话状态保持及表单

    浏览器存储cookie的方式不太安全,那有没有更好些的来存储登入状态的方式呢??? 状态保持----cookie和session: 状态保持: 1.http协议是无状态的:每次请求都是一次新的请求,不 ...

  8. Binlog详解

    一.介绍 binlog, 即二进制文件,他记录了MySQL所有数据的变更,并以二进制的形式存储在磁盘上 二.binlog模式 binlog有三种模式:ROW(行模式),   Statement(语句模 ...

  9. crm 简约笔记

    crm# 给modelform使用的    tutor = models.ForeignKey(verbose_name='班主任', to='UserInfo', related_name='cla ...

  10. POJ 3310 Caterpillar(图的度的判定)

    题意: 给定一幅图, 问符不符合一下两个条件: (1) 图中没有环 (2)图中存在一条链, 点要么在链上, 要么是链上点的邻居. 分析: 建图,记录度数, 去掉所有度为1的点, 然后看看剩下是否是有2 ...