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

相关推荐
就改了几秒前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_2 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术17 分钟前
京东小程序JS API仓颉改造实践
前端
奋飛27 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟27 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游30 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte35 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟44 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor44 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter1 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript