JS : 柯里化 分布传参给函数

我正在参加年度优秀作者评选,公主王子们请帮我投票

前言

在 JavaScript 中,柯里化是一种将接受多个参数的函数转换为一系列接受一个参数的函数的技术。这可以通过多种方式来实现,其中一种常见的方式是使用闭包和递归。

下面是一个简单的例子,演示了如何在 JavaScript 中实现柯里化:

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

// 使用柯里化的函数
const add5 = add(5);
console.log(add5(3)); // 输出 8

在上面的例子中,我们定义了一个函数add,它接受一个参数a,并返回一个函数,这个返回的函数接受另一个参数b,并返回a + b的结果。这样我们就实现了柯里化,将原本接受两个参数的函数转换为了两个接受一个参数的函数的序列。

柯里化可以帮助我们更灵活地使用函数,实现参数的延迟传递和复用。在实际开发中,柯里化常常用于函数式编程和简化函数的调用方式

柯里化

函数柯里化是一种将接受多个参数的函数转换为一系列接受一个参数的函数的技术。这种技术有时会被用到,原因如下:

  1. 延迟执行:柯里化可以将原本需要多个参数的函数转换为一系列接受单个参数的函数,这样就可以先传入部分参数,延迟执行函数的调用。
  2. 参数复用:柯里化可以将一部分参数固定下来,形成一个新的函数,这样就可以重复调用这个新函数并传入不同的参数,而不用重复传入固定的参数。
  3. 函数复用:柯里化可以帮助我们创建可以复用的函数,这样可以减少代码的重复编写。

网络请求时

柯里化在网络请求时可以发挥作用。有时候在进行网络请求时,可能无法一次性获取到所有需要的参数,柯里化可以帮助我们先传入部分参数,然后在获取到其他参数后再执行函数。

举个例子,假设我们有一个函数sendRequest,需要传入三个参数url、method和data来发起网络请求。但是在某些情况下,我们可能只能先获取到url,而method和data需要在后续的操作中获取。这时候我们可以使用柯里化,先创建一个接受url参数的函数,然后在获取到method和data后再传入这两个参数,执行这个函数。

这样就可以实现在获取到所有参数之前先进行部分参数的传递,延迟执行网络请求的操作。这种方式可以更灵活地处理网络请求的情况,提高代码的可维护性和复用性。

实现柯里化

比如我们想将add分布传参, 例如add(1)(2)(3),我们可以怎么做

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

function curry(fn) {
  
    let judge = (...args) => {
        if (args.length === fn.length) {
            return fn(...args)  // 退出条件
        }
        // 返回参数, 继续收集参数
        return (...arg) => judge(...args, ...arg)
    }
    return judge
}
console.log(add.length);
// add(1)(2)(3)
const curryAdd = curry(add)
curryAdd(1)(2)(3)
  1. 首先,我们定义了一个简单的add函数,它接受三个参数a、b和c,并返回它们的和。

  2. 然后,我们定义了一个curry函数,它接受一个函数fn作为参数,然后返回一个新的函数judge。

  3. 在judge函数内部,我们首先检查传入的参数args的长度是否等于原始函数fn的参数个数(fn.length)。如果相等,说明所有参数已经收集完毕,此时我们直接调用原始函数fn,并将收集到的参数传递进去,然后返回结果。

  4. 如果参数个数不够,我们返回一个新的函数,这个新函数也叫judge。这个新的judge函数接受更多的参数arg,并将之前收集到的参数args和新参数arg合并起来,然后再次调用自身,继续收集参数。

  5. 这样,我们就实现了一个通用的柯里化函数curry。通过调用curry函数并传入一个函数,我们可以得到一个柯里化后的新函数,这个新函数可以接受部分参数,并在参数收集完毕后执行原始函数。

  6. 最后,我们使用curry函数将add函数转换为了一个柯里化后的函数curryAdd,然后调用curryAdd(1)(2)(3)来演示柯里化后的调用方式。

相关推荐
开心工作室_kaic15 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿34 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro