[Javascript] Improve Composition with the Compose Combinator
To make our composition more readable and easier to name we are going to ceate a compose function we can use to avoid having to manually nest our transducer calls.
We'll also go over semantically naming your compose functions for extra readability.
Nested style:
import {doubleTheNumber, evenOnly} from "../utils";
const map = xf => reducer => {
return (accumulation, value) => {
return reducer(accumulation, xf(value));
};
};
const filter = predicate => reducer => {
return (accumulation, value) => {
if (predicate(value)) return reducer(accumulation, value);
return accumulation;
};
};
const isEvenFilter = filter(evenOnly);
const isNot2Filter = filter(val => val !== 2);
const doubleMap = map(doubleTheNumber);
const pushReducer = (accumulation, value) => {
accumulation.push(value);
return accumulation;
};
[1,2,3,4].reduce(isNot2Filter(isEvenFilter(doubleMap(pushReducer))), []);
Compose function:
import {filter, map, evenOnly, doubleTheNumber} from "../utils";
const doubleMap = map(doubleTheNumber);
const isEvenFilter = filter(evenOnly);
const isNot2Filter = filter(val => val !== 2);
const pushReducer = (accumulation, value) => {
accumulation.push(value);
return accumulation;
};
[1, 2, 3, 4].reduce(isNot2Filter(isEvenFilter(doubleMap(pushReducer))), []);
// compose(f,g)(x) === f(g(x));
//
// compose(isNot2Filter, isEvenFilter, doubleMap)(pushReducer) ===
// isNot2Filter(isEvenFilter(doubleMap(pushReducer)));
const compose = (...functions) =>
functions.reduce((accumulation, fn) =>
(...args) => accumulation(fn(...args)), x => x);
[1, 2, 3, 4].reduce(
compose(isNot2Filter, isEvenFilter, doubleMap)(pushReducer),
[],
); /*?*/
[Javascript] Improve Composition with the Compose Combinator的更多相关文章
- [Javascript] Understand Function Composition By Building Compose and ComposeAll Utility Functions
Function composition allows us to build up powerful functions from smaller, more focused functions. ...
- 每个JavaScript开发人员应该知道的33个概念
每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- Currying 及应用
Currying,中文多翻译为柯里化,感觉这个音译还没有达到类似 Humor 之于幽默的传神地步,后面直接使用 Currying. 什么是 Currying Currying 是这么一种机制,它将一个 ...
- Vue3.0常用代码片段和开发插件
Vue3 Snippets for Visual Studio Code Vue3 Snippets源码 Vue3 Snippets下载 This extension adds Vue3 Code S ...
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
- 高阶组件 HOC
一. A higher-order component (HOC) is an advanced technique in React for reusing component logic. a h ...
- [Ramda] Lens in Depth
In this post, we are going to see how to use Ramda Lens. For example, we have data: const {log} = re ...
- [Functional Programming] Working with two functors(Applicative Functors)-- Part2 --liftAN
Let's examine a pointfree way to write these applicative calls. Since we know map is equal to of/ap, ...
随机推荐
- BlogEngine.NET架构学习:Extension扩展实现
之前有个系列文章介绍过BlogEngine.NET,其中也有关于插件的介绍:"BlogEngine.Net架构与源代码分析系列part9:开发扩展(上)--Extension与管理上的实现& ...
- JS冒泡排序方法
- 数组实例的 entries(),keys() 和 values()
数组实例的 entries(),keys() 和 values() entries(),keys()和values(),用于遍历数组.它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一 ...
- javascript try{}catch(e){}
<script language="javascript"> try { throw new Error(10,"asdasdasd") } ca ...
- 基于ORA-12170 TNS 连接超时解决办法详解
转自原文 基于ORA-12170 TNS 连接超时解决办法详解 1.开始----程序-----Oracle------配置和移植工具-----Net Manager----本地----服务命名---o ...
- Win7上从硬盘安装Debian
近期一直想将笔记本搞成Win7+Debian双系统.由于无论怎样优化,2G内存的Win7笔记本上开个Linux虚拟机都实在吃力. 经过一段时间的资料搜索.并阅读Debian官方的安装文档,今天最终实现 ...
- nyist oj 138 找球号(二)(hash 表+位运算)
找球号(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描写叙述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中.每一个球上都有一个整数编号i(0<=i< ...
- Apicloud自定义模块
各种坑,折腾了两天才有点头绪.我用的是Android Studio编辑器,官网是Eclipse的视频.文档也比较蛋疼. 自定义模块的目录结构要按照下面来处理 其中res_模块名,存放res和Andro ...
- 你不知道的JavaScript博文参考书籍
you don't know js系列书籍是谷歌地图开发人员编写,内容非常好,四卷已收集齐全. 笔者打包上传到了CSDN,下载地址: http://download.csdn.net/detail/r ...
- Android TextView加上阴影效果
<TextView android:id="@+id/test_shadow" android:layout_width="wrap_content" a ...