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

    tabsGif

  2. js将时间戳装换成日期格式

    13位时间戳改为yyyy-MM-dd HH-mm-ss 格式 目标时间戳:1516324500000 formatDateTime (unix) { // 转换时间戳 var date = new D ...

  3. Angular缺少 FormsModule

    虽然 ngModel是一个有效的 Angular 指令,不过它在默认情况下是不可用的. 解决方法: 在根模块引入FormModule import { FormsModule } from '@ang ...

  4. Manjaro/Arch linux 安装输入法

    输入命令: sudo pacman -Syu fcitx fcitx-googlepinyin fcitx-im fcitx-configtool 编辑 ~/.xprofile:# xfcitxexp ...

  5. redhat 7.x 、redhat 6.x查看硬盘UUID方法

    1.查看磁盘分区UUID: [root@rac01 ~]# blkid /dev/sdb1: UUID="6bba92c4-0b25-4cc4-9442-ca87c563720a" ...

  6. Linux 命令学习(1): head和tail

    版权声明:本文为博主原创文章,未经允许,不得转载. head head 命令可以将一段文本的开头一部分输出到标准输出. head命令既可以处理文本文件也可以处理标准输入. 基本应用 处理文本文件: h ...

  7. 条款34:区分接口继承和实现继承(Different between inheritance of interface and inheritance of implemenation)

    NOTE: 1.接口继承和实现继承不同.在public继承之下,derived classes总是继承base class的接口. 2.pure virtual 函数只具体指定接口继承及缺省实现继承. ...

  8. Python3--中括号"[]"与冒号":"在列表中的作用

    先来定义两个列表: liststr = ["helloworld","hahahh","123456"] listnum = [1,2,3, ...

  9. tiles框架的definition讲解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE tiles-definitions PUBL ...

  10. PS学习笔记(04)

    Photoshop滤镜的安装 Photoshop滤镜的默认格式为.8bf(也有些滤镜为exe格式的可执行文件),如果你下载的是压缩包,请解压之后再安装. 方法一: 如果你下载的滤镜为exe的可执行文件 ...