【转】Deep dive into pipe function in RxJS
原文: https://codewithstyle.info/deep-dive-pipe-function-rxjs/
------------------------------------------------------------
Version 5 of RxJS introduced the concept of lettable (also known as pipeable) operators. Version 6 went one step further and deprecated the old way of calling operators (method chaining). You might have already used the pipe
function. But do you really understand what it does?
Composing functions
RxJS is often called a functional-reactive programming library. It should not come as a surprise that you will find many functional programming inspirations in it. One of them is the pipe
function. Take a look at the below piece of code:
const getElement =
|
The logElementValue
function takes an id
and logs to the console the value of the element with provided id
. Can you see a pattern in this function’s implementation? Firstly, it calls getElement
with id
and stores the result in el
. Next, the result is passed to getValue
which produces a new result, el
. Finally, el
is passed to console.log
. What this function does is simply taking the result of a function and passing it as an argument to another function. Is there a better, more concise way to implement this function? Let’s say we just have two functions (getElement
and getValue
). We will implement a generic function called compose
that will pass the result of getElement
to getValue
.
const compose = (f, g) => x => g(f(x));
|
The definition is very simple but may take a moment to parse. We’ve defined a function that takes two functions f
and g
(that would be getElement
and getValue
in our case) and returns a new function. This new function will take an argument, pass it to f
and then pass the result to g
. That’s exactly what we need! Now I can rewrite logElementValue
:
function logElementValue(id) {
|
How about more than two functions?
But, wait! Once we have the result of calling getValueFromId
we immediately pass it to console.log
. So it’s the same pattern here. We could write it like this:
function logElementValue(id) {
|
But life would be much simpler if compose
could take any number of functions. Can we do this? Sure:
const composeMany = (...args) => args.reduce(compose);
|
Another brain teaser! composeMany
takes any number of functions. They are stored in args
array. We reduce
over args
composing every function with the result of composing previous functions. Anyway, the results is a function that takes any number of functions and will pass the result of N-th
function to (N+1)-th
function. But what have we achieved by that?
function logElementValue(id) {
|
Which can be simplified even more:
const logElementValue = composeMany(getElement, getValue, console.log);
|
Isn’t that cool? We have significantly simplified the code. It’s now very clear what logElementValue
does. And by the way - composeMany
is just a name a came up with. The official name is pipe
!
const logElementValue = pipe(getElement, getValue, console.log);
|
Back to RxJS
Let’s take an example of pipe
usage in RxJS.
number$.pipe(
|
We can also write it in a different way:
const { pipe } = rxjs;
|
And the result is exactly the same! As you can see, the pipe
function in RxJS behaves in exactly the same way that the pipe
function that we’ve defined in the first part of the article. It takes a number of functions and composes them by passing the result of a function as an argument to another function. You might say that this is different than the previous example because here we’re invoking map
and filter
and not simply passing them. Actually, both map
and filter
will return functions. We’re not composing map
and filter
themselves but rather the functions returned by invoking them. You can check out how RxJS implements pipe
function here.
Pipeline operator
Our function is such a useful concept that it might be added as a separate operator to the JavaScript language! It would mean that the example from the previous article can be written in an even simpler way:
const logElementValue = getElement |> getValue |> console.log;
|
You can see the details of the proposal here.
Summary
I hope this article helped you understand what pipe
function is all about. You should now feel more comfortable using it! The fact that RxJS migrated from the traditional, object-oriented approach of applying operators to the pipeline approach shows how strong the influence of functional programming is nowadays. I think that’s great! Let me know in comments if you prefer pipe
function to traditional method chaining.
原文地址:https://www.cnblogs.com/oxspirt/p/11812500.html
- RMI
- WebService
- 设计模式之策略模式
- 设计模式之状态模式
- PDF.NET数据开发框架实体类操作实例(for PostgreSQL,并且解决自增问题) PDF.NET数据开发框架实体类操作实例(MySQL)
- 设计模式之代理模式
- 续谈ActiveMQ之java如何操作ActiveMQ(springBoot项目)
- 深入理解JVM原理之编译openjdk7
- 初识ActiveMQ
- Kafka集群安装
- 知其所以然之永不遗忘的算法
- ZOOKEEPER集群搭建及测试
- 【Python环境】Scikit-Learn:开源的机器学习Python模块
- 【Python环境】可爱的 Python: 自然语言工具包入门
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【进化基因组学】比较转录组--数据预处理
- 深入浅出神经网络的改进方法!
- 机器学习4个常用超参数调试方法!
- 总结:DCIC算法分析赛完整方案分享!
- 提高微服务安全性的11个方法
- nmap
- MSF基础与应用
- Windows系统组件漏洞
- 【风险通告】FastAdmin会员中心Getshell漏洞
- Azure Cosmos DB介绍及演示
- 从一次编译出发梳理概念: Jetty,Jersey,hk2,glassFish,Javax,Jakarta
- 《一起学sentinel》一、一起搭建sentinel服务
- InfluxDB和Grafana实现传感器数据的存储和可视化
- 样本相关性分析
- Android 序列化 Serializable与Parcelable