今天我们聊聊JavaScript中的函数柯里化

序言

今天呢我们要来聊的是在JS中一种灵活处理函数的方式,在生活中,假如一位高级的厨师想要烹饪出一道美味佳肴,料理的添加顺序肯定不是一次性的,而是有规律且分布进行添加的。

欸,对比之下,有时候我们编程也是如此,如果一个函数需要接收n个参数才能返回最终结果,且无法一次性接收全部参数。

我们有办法吗?有!

在JavaScript中,就有一个这样隐藏在幕后的编程魔法------函数柯里化(Currying)。搞懂了这项技能,当我们处理函数时就能更加得心应手,就像调料师傅逐滴调出完美的酱汁一样。

那么现在就让我们一起踏上这场风格欢快的探险,解锁函数柯里化的神奇之谜!

理解基础:add函数

首先,让我们先来看一下我们今天要进行柯里化的基础函数:add。这个函数非常简单,它接受三个参数,并返回它们的和。

js 复制代码
function add(a, b, c) {
    return a + b + c;
}

然后,我们需要思考一个问题:你知道如何拿到这个函数接收参数的个数吗?

答案就是: fn.length

比如我们这里打印一下add.length

js 复制代码
console.log(add.length); // 3

这样我们就拿到了这个函数接收的参数个数为3,这一步为我们后续柯里化函数的终止条件做了铺垫。

柯里函数的秘密

接下来呢,我们就需要请出今天内容的神秘的向导------curry函数。它的任务是将函数柯里化,就像一位魔法导师把法术传授给学徒一样。

js 复制代码
function curry(fn) {
    let judge = (...args) => {
        if (args.length === fn.length) {
            return fn(...args);
        } else {
            return (...arg) => judge(...args, ...arg);
        }
    }
    return judge;
}

代码解释

  1. 首先,我们定义了一个函数 curry ,该函数接受一个参数 fn,表示要进行柯里化的原函数。

  2. 接着我们在函数内部定义一个新函数judge,并且使用剩余参数(rest parameters)语法,代表该函数可以接受任意数量的参数,这些参数会被存储在一个数组 args 中。

  3. 然后我们进行判断,当数组args的长度等于 fn.length 。直接调用原函数 fn,并传入所有参数,然后返回结果。

  4. 否则,我们返回一个新的函数,该函数将接收到的到的参数收集到一个名为 arg 的数组中,并通过递归调用内部函数 judge 来累积参数。

简单来说就是:

  • ...args 代表收集的当前调用 judge 函数时传递的参数。
  • ...arg 代表收集的传递给它的任何新参数。它会展开由剩余参数收集的参数数组中的元素。

直到满足上面if中的条件。也就是接收到的参数数量等于原函数 fn 的参数数量,然后调用原函数,最后返回judge。

应用柯里化到add函数

现在呢,我们完成了以上步骤,就可以开始将curry函数应用到add函数上了,于是乎我们得到了一个新的柯里化版本的函数curryAdd

js 复制代码
const curryAdd = curry(add);

最后,我们通过调用curryAdd(1)(2)(3)来演示柯里化的实际应用,结果输出不出意外,果然是6

总结

我们进行这一连串的调用过程其实就是在逐步地向函数传递参数。首先,curryAdd(1)返回一个新的函数,接着(2)返回另一个函数,最后(3)调用原始的add函数,将所有参数相加。结果6被打印到控制台。

函数柯里化是JavaScript中一个强大的编程技术,它使得函数调用更加灵活,允许我们根据需要逐步传递参数。通过本文的分析,我们深入理解了柯里化的工作原理,并了解了如何应用它来提高代码的可读性和复用性。在实际的项目中,函数柯里化可以成为编写更加优雅和模块化代码的有力工具。

那么到了这里我们今天的文章就结束啦~

创作不易,如果感觉这个文章对你有帮助的话,点个赞吧♥

更多内容【AIGC】如何使用Autogen库打造智能对话体验?请看保姆级教学

ReacheMe : GitHub Gitee

相关推荐
undefined&&懒洋洋2 分钟前
Web和UE5像素流送、通信教程
前端·ue5
大前端爱好者2 小时前
React 19 新特性详解
前端
随云6322 小时前
WebGL编程指南之着色器语言GLSL ES(入门GLSL ES这篇就够了)
前端·webgl
随云6322 小时前
WebGL编程指南之进入三维世界
前端·webgl
J老熊2 小时前
Spring Cloud Netflix Eureka 注册中心讲解和案例示范
java·后端·spring·spring cloud·面试·eureka·系统架构
我爱学Python!2 小时前
面试问我LLM中的RAG,秒过!!!
人工智能·面试·llm·prompt·ai大模型·rag·大模型应用
OLDERHARD3 小时前
Java - LeetCode面试经典150题 - 矩阵 (四)
java·leetcode·面试
寻找09之夏3 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js
非著名架构师3 小时前
js混淆的方式方法
开发语言·javascript·ecmascript
银氨溶液4 小时前
MySql数据引擎InnoDB引起的锁问题
数据库·mysql·面试·求职