函数组合:compose与pipe实现方法

函数组合通过compose(从右到左)和pipe(从左到右)实现,分别使用reduceRight和reduce串联函数,提升代码抽象与可读性。

函数组合:compose与pipe实现方法

在函数式编程中,函数组合是一种将多个函数串联起来,前一个函数的输出作为下一个函数输入的技术。常见的两种实现方式是 composepipe,它们的核心思想相同,但执行顺序相反。

compose:从右到左执行

compose 接收多个函数作为参数,返回一个新的函数。调用这个新函数时,会从最右边的函数开始执行,逐步向左传递结果。

实现原理:使用 ...functions 收集所有传入的函数返回一个函数,接收初始参数利用 reduceRight 从右往左依次应用函数

代码实现:

const compose = (...functions) => (value) =>  functions.reduceRight((acc, fn) => fn(acc), value);

使用示例:

const toUpper = str => str.toUpperCase();const addExclamation = str => str + '!';const greet = str => 'Hello, ' + str;

const composed = compose(greet, toUpper, addExclamation);console.log(composed('world')); // 输出: Hello, WORLD!

pipe:从左到右执行

pipecompose 相反,它按照函数传入的顺序,从左到右依次执行,更符合多数人的阅读习惯。

实现原理:同样使用剩余参数收集函数列表返回一个高阶函数,接收初始值使用 reduce 从左往右累积执行结果

代码实现:

const pipe = (...functions) => (value) =>  functions.reduce((acc, fn) => fn(acc), value);

使用示例:

const double = x => x * 2;const increment = x => x + 1;const square = x => x ** 2;

const piped = pipe(increment, double, square);console.log(piped(3)); // ((3 + 1) * 2) ^ 2 = 64

实际应用建议

两者没有绝对优劣,选择取决于团队习惯和可读性需求。

数学上更贴近传统函数复合(f ∘ g),喜欢从内向外思考可用 compose希望逻辑流程与代码顺序一致,推荐使用 pipe注意函数应为一元函数(只接受一个参数)以保证组合顺畅可结合 lodash/fpramda 等库使用更成熟的组合工具

基本上就这些,掌握这两个模式能显著提升函数抽象能力。

以上就是函数组合:compose与pipe实现方法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1539232.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 06:50:58
下一篇 2025年12月21日 09:04:48

相关推荐

  • JavaScript时间处理_时区转换与日历组件

    JavaScript的Date对象基于UTC存储时间戳但显示时转为本地时区,处理时区和日历需注意:构造函数解析字符串时区分是否含时区信息,推荐使用toISOString输出UTC时间;跨时区显示可用toLocaleString配合timeZone选项(如America/New_York);构建日历时…

    2025年12月21日
    000
  • JavaScript防抖与节流_性能优化实践

    防抖和节流是前端优化高频事件的两种手段:防抖通过延迟执行并仅响应最后一次操作,适用于搜索输入等场景;节流则保证固定时间间隔内最多执行一次,适合滚动监听等持续响应需求。 在前端开发中,频繁触发的事件(如窗口滚动、输入框输入、鼠标移动)容易导致性能问题。为优化这类场景,防抖(Debounce)和节流(T…

    2025年12月21日
    000
  • JavaScript代码规范_ESLint插件开发

    ESLint插件开发需创建含rules、configs的npm包,如eslint-plugin-myteam;编写规则函数遍历AST节点,例如禁止console.log需监听MemberExpression并用context.report报错;通过RuleTester测试有效与无效代码案例;发布后在…

    2025年12月21日
    000
  • JavaScript算法优化_时间复杂度分析与改进

    时间复杂度是衡量算法效率的核心指标,优化可提升性能与体验。1. 理解O(1)、O(n)、O(n²)、O(log n)等表示法,识别高复杂度操作;2. 减少嵌套循环,如用哈希表将两数之和从O(n²)降为O(n);3. 善用Set、Map及内置方法filter、map等提高效率;4. 排序预处理结合双指…

    2025年12月21日
    000
  • JavaScript模块联邦_微前端架构设计

    模块联邦是Webpack 5实现微前端的核心技术,支持运行时动态加载远程子应用模块。主应用通过remotes引用子应用,子应用通过exposes暴露组件,shared配置共享依赖。例如主应用配置remotes引入remoteApp@http://localhost:3001/remoteEntry.…

    2025年12月21日
    000
  • 使用 WebSocket 连接 SignalR Hub 时无法接收消息的解决方案

    本文旨在解决在使用原生 WebSocket 连接 SignalR Hub 时,客户端无法接收到服务端推送消息的问题。文章将分析可能的原因,并提供一种通过修改 SignalR 库的导入方式来解决问题的方案,从而避免使用 SignalR 库时出现的构建错误。 当尝试使用 WebSocket 直接连接 S…

    2025年12月21日
    000
  • JS正则表达式常用方法与实践_javascript正则

    JavaScript中正则表达式通过字面量或RegExp构造函数创建,常用修饰符包括g、i、m、u、s;核心方法有test、exec、match、replace和split,广泛应用于表单验证、数据提取与文本替换,如手机号验证、URL参数解析、HTML标签过滤及数字千分位格式化,熟练掌握可高效处理字…

    2025年12月21日
    000
  • JS数组扁平化_多种方法性能对比

    数组扁平化方法包括:1. flat()语法简洁但兼容性差;2. reduce+concat逻辑直观但内存开销大;3. 扩展运算符+循环适合中等深度但性能随层数下降;4. 栈模拟法避免递归,适合深层结构;5. toString+split仅限数字且最快。性能上,小数组用flat(),大数组用栈模拟,纯…

    2025年12月21日
    000
  • React 应用中点击按钮导致页面刷新的问题分析与解决

    MetaData: Key Value {assetData.metaData.map((item, idx) => ( updateMetaData(e, idx)} /> updateMetaData(e, idx)} /> {assetData.metaData.length…

    2025年12月21日
    000
  • Firestore动态子字段查询的复合索引策略:基于关键词数组的优化方案

    本文旨在解决Firestore中对动态子字段进行复杂查询时遇到的索引问题。当需要根据不确定的子字段(如`genres.Action`或`studios.Studio A`)进行过滤时,直接创建复合索引会变得不切实际。文章提出了一种基于预计算关键词数组的优化策略,通过在文档中新增一个`keywords…

    2025年12月21日
    000
  • JavaScript 事件处理中的参数传递问题:字符串与变量混淆

    本文深入探讨了在 HTML 事件处理中,JavaScript 函数参数传递时,由于字符串和变量混淆而导致的问题。通过分析一个 PHP 生成 HTML 的示例,解释了为什么期望的字符串参数变成了 HTML 元素对象,并提供了解决方案,强调了在混合编程中保持代码清晰的重要性。 在 Web 开发中,经常需…

    2025年12月21日
    000
  • React useEffect 依赖项缺失警告的解决方案

    本文旨在解决React开发中常见的`useEffect` Hook依赖项缺失警告问题。我们将深入探讨警告产生的原因,并提供使用`useCallback` Hook来优化函数依赖,从而消除警告并确保代码正确运行的实践方法。通过本文,你将学会如何有效地管理`useEffect`的依赖项,避免潜在的bug…

    2025年12月21日
    000
  • JavaScript类怎么使用_ES6类语法与JS全栈面向对象开发实践教程

    ES6 类提供更清晰的面向对象语法,class 定义类,constructor 初始化实例,方法直接写在类体中;extends 实现继承,子类需调用 super() 初始化父类;static 定义静态方法和属性,属于类本身;广泛应用于全栈开发中的模块化设计。 JavaScript 中的类是 ES6 …

    2025年12月21日
    000
  • JavaScript 对象拷贝:浅拷贝与深拷贝的实现方案

    浅拷贝只复制对象第一层属性,深层共享引用,常用方法有Object.assign、扩展运算符;深拷贝递归复制所有层级,实现方式包括JSON.parse(JSON.stringify())、递归函数处理循环引用、Lodash的cloneDeep和浏览器原生structuredClone。 JavaScr…

    2025年12月21日
    000
  • JS注解怎么用于调试_ JS注解辅助代码调试的方法与实践

    JavaScript虽无Java式注解,但可通过// TODO、// FIXME等标记辅助调试,结合/ global /声明全局变量、sourceMappingURL映射压缩代码及debugger注释控制中断,提升开发效率与代码维护性。 JavaScript 中并没有像 Java 那样的“注解”(A…

    2025年12月21日
    000
  • JS插件开发指南_IIFE模式封装

    答案:使用IIFE可有效封装JavaScript插件,避免全局污染并实现跨平台兼容。通过立即执行函数创建私有作用域,内部定义插件逻辑,利用factory模式返回构造函数,并结合模块化判断(CommonJS、AMD、全局对象)实现多环境支持;采用默认配置合并、原型方法扩展和命名空间管理提升可维护性与复…

    2025年12月21日
    000
  • js中diff函数的使用

    diff操作指比较两个值的差异,常见于对象、数组或字符串间。核心是找出增删改部分,如用diff库对比文本,或手写函数比对对象属性变化,适用于状态更新与UI渲染优化等场景。 JavaScript 中并没有内置的 diff 函数,但“diff”通常指的是比较两个对象、数组或字符串之间的差异。这种功能在处…

    2025年12月21日
    000
  • JavaScript如何使用模块_JavaScriptES6模块importexport使用方法教程

    ES6引入模块系统,通过export导出和import导入实现代码复用;支持命名导出与默认导出,需在HTML中使用type=”module”加载,模块自动运行在严格模式下且仅执行一次。 JavaScript 的模块系统在 ES6(ECMAScript 2015)中正式引入,解…

    2025年12月21日
    000
  • MongoDB聚合怎么使用_MongoDB聚合管道功能与JS全栈数据处理教程

    MongoDB聚合管道是高效处理数据的核心工具,通过$match、$group、$sort等阶段实现数据筛选、分组、排序和关联,常用于统计分析与多表连接,在Node.js中结合Express与Mongoose可构建高性能API,如用户消费排行榜,前端再获取并展示结果。 在现代全栈开发中,MongoD…

    2025年12月21日
    000
  • 解决React useEffect 依赖缺失警告:深入解析与实践

    本文旨在解决React开发中常见的`useEffect`依赖缺失警告问题。我们将深入探讨警告产生的原因,并提供使用`useCallback`进行函数记忆化的解决方案,从而优化React组件的性能并消除不必要的警告,确保代码的健壮性和可维护性。 在React开发中,useEffect Hook 是处理…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信