为什么compose是函数编程不可缺少的组件?

大家好这里是梦兽编程,一份分享编程经验和编程思路的UP主。UP主会经常在网上分享一些编程思路和解决方案。有些思路可能是你花几千块去培训也不一定有,如果感兴趣的话可以关注梦兽编程。

为什么compose[组合]是函数编程不可缺少的内容?

这次的分享我们不需要与面向对象的设计模式进行对比了,因为compose是函数式编程的一个重要标记。面向对象一般用不上。

在之前的分享中我们都知道函数范式与面向对象范式编程最主要的区别是,函数式编程是以函数作为第一公民。所以很多时候我们的代码可能会出现以下的编码。

比如我们现在有三个函数,我们有一个场景需要对一个数字进行先加+1,后*3,再减去1

javascript 复制代码
function addNumOne(value: number) {
  return value + 1;
}

function addSubOne(value: number) {
  return value + 2;
}

function addMultTree(value: number) {
  return value * 3;
}

这个时候你会如何编码呢?我们很容易就会写出下面的代码。

ini 复制代码
const sum = addSubOne(addMultTree(addNumOne(2)))

如果你是一位阿拉伯人看到这种编码方式应该是非常容易理解的,但很多的语言是喜欢从左往右进行阅读。还有一个比较重要的问题是你会发现以上的写法你是无法把上面的"组合"进行复用的。

如果你愿意的话可以再 c v 一下变成也不是不可以的,因为函数范式的不可变性,你cv后也不会改变输出的结果。

ini 复制代码
const sum = addSubOne(addMultTree(addNumOne(3)))

我们要如何解决这一类问题

复用性

我们先要解决复用性的问题,解决复用性的问题也很好理解我们只要再拿一个函数进行hoc就好了。比如:

ini 复制代码
const addAfterMultAfterOne = (value: number) => {
  return addSubOne(addMultTree(addNumOne(value)));
};

从左往右的阅读体验 - compose

微信图片_20230726152652.png

可以看出我们只需要做一个pipe就好了。其实中间件的处理逻辑和今天说的柯里化差不多。 我们可以看到我们的每次pipe的结果都依赖上一次的结果。所以只需要那一个数组存起来然后进行反转,把上一次的结果给到下一个函数即可。

ps: 当然柯里化的用途很广,我只是用来处理这种场景比较多。还有其他用途但用得比较少所以就没分享了,请大家跳出被动式思维,主动去思考。

先写一个简单的函数

typescript 复制代码
const compose = (...fns) => {
  // 返回一个输入数据源函数 - 也是下次分享的重要概念柯里化
  return (value: number) => {
    return fns.reduce((y, f) => f(y), value);
  };
};

如何使用

ini 复制代码
const addAfterMultAfterOne = compose(addNumOne, addMultTree, addSubOne);
console.log(addAfterMultAfterOne(2));

一个思考的问题

我们可以发现这里的addNumOne我们一件写死了+1如果我们下次还需要进行加法的操作的时候,会发现做了重复工作。我们要如何解决呢?这是下次要分享的内容。

javascript 复制代码
function addNumOne(value: number) {
  return value + 1;
}

以上就是本期的所有内容,如果对你的学习和生活有什么帮助,请一定要给up主一个一件三连。你的三连是我创作的最大动力,如果你还没关注up主的可以关注一下,下次回来将会分享柯里化的作用。

本文使用 markdown.com.cn 排版

相关推荐
不爱吃糖的程序媛18 分钟前
Electron 智能文件分析器开发实战适配鸿蒙
前端·javascript·electron
Doro再努力23 分钟前
2025_11_14洛谷【入门1】数据结构刷题小结
前端·数据结构·算法
IT_陈寒41 分钟前
SpringBoot 3.2新特性实战:这5个隐藏技巧让你的应用性能飙升50%
前端·人工智能·后端
eason_fan1 小时前
Monorepo性能噩梦:一行配置解决VSCode卡顿与TS类型崩溃
前端·typescript·visual studio code
天天进步20152 小时前
Webpack到Vite:构建工具迁移实战经验总结
前端·webpack·node.js
0***142 小时前
免费的WebAssembly模块打包,Webpack配置
前端·webpack·wasm
小胖学前端2 小时前
解决 uniapp H5 与原生应用通信的坑:一个经过实战验证的解决方案
前端·uni-app
LaoZhangAI2 小时前
Gemini 2.5 Flash Image API尺寸设置完整指南:10种宽高比详解
前端·后端
kangyouwei2 小时前
鸿蒙开发:19-本地开发配置bash环境执行hvigorw命令
前端·harmonyos
Achieve前端实验室2 小时前
JavaScript 原型/原型链
前端·javascript