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)来演示柯里化后的调用方式。

相关推荐
你的人类朋友21 小时前
✍️记录自己的git分支管理实践
前端·git·后端
合作小小程序员小小店21 小时前
web网页开发,在线考勤管理系统,基于Idea,html,css,vue,java,springboot,mysql
java·前端·vue.js·后端·intellij-idea·springboot
防火墙在线1 天前
前后端通信加解密(Web Crypto API )
前端·vue.js·网络协议·node.js·express
Jacky-0081 天前
Node + vite + React 创建项目
前端·react.js·前端框架
CoderYanger1 天前
前端基础——CSS练习项目:百度热榜实现
开发语言·前端·css·百度·html·1024程序员节
i_am_a_div_日积月累_1 天前
10个css更新
前端·css
她是太阳,好耀眼i1 天前
Nvm 实现vue版本切换
javascript·vue.js·ecmascript
蒲公英10011 天前
在wps软件的word中使用js宏命令设置表格背景色
javascript·word·wps
倚栏听风雨1 天前
npm命令详解
前端
用户47949283569151 天前
为什么我的react项目启动后,dom上的类名里没有代码位置信息
前端·react.js