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

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

前言

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

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

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),我们可以怎么做

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)来演示柯里化后的调用方式。
相关文章
|
2天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
10天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
18 4
|
10天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
11 2
|
12天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
20 5
|
12天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
17 3
|
16天前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
14 3
|
17天前
|
JavaScript 前端开发
在JS中如何声明一个函数
在JS中如何声明一个函数
22 2
|
1天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是由关键词 `function` 开头的代码块,用于执行特定任务。函数可以无参数或带多个参数,参数以逗号分隔。调用函数时,传入的参数值会被函数内部使用。JavaScript 对大小写敏感,函数名和调用时必须保持一致。示例展示了如何通过按钮点击调用带参数的函数,根据不同的参数显示不同的欢迎信息。
|
5天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
9 0
|
16天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数