今天我们聊聊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

相关推荐
Nan_Shu_61423 分钟前
Web前端面试题(2)
前端
知识分享小能手29 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军2 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js