首页 > 其他分享 >一文彻底搞懂JS函数柯里化

一文彻底搞懂JS函数柯里化

时间:2023-09-20 22:23:39浏览次数:38  
标签:... return 函数 JS 参数 柯里化 搞懂 fn

函数柯里化是一种强大的函数式编程技术,它使我们能够预设函数的参数,创建新的函数,并在需要的时候执行这些函数。这个技术提供了强大的代码复用和组合能力,使我们的代码变得更简洁、更具可读性。

什么是函数柯里化?

函数柯里化(Currying)是在函数式编程中常用的技术,它的基本思想是将一个带有多个参数的函数转化为一系列使用一个参数的函数。这种转化可以使我们在函数调用时只提供部分参数,从而得到一个新的函数,这个新的函数接收剩下的参数。

函数柯里化的优点

主要有两个优点:

  1. 参数复用:我们可以创建一个新的函数,它的一部分参数已经被预设好了。
  2. 延迟执行:我们可以创建一系列的函数,只有在真正需要执行时才提供所有的参数。

如何实现函数柯里化?

在JavaScript中,实现函数柯里化的一种常见方法是使用高阶函数。下面是一个简单的柯里化函数的实现:


function curry(fn) {
    var arity = fn.length;
    return function f1(...args) {
        if (args.length >= arity) {
            return fn(...args);
        } else {
            return function f2(...moreArgs) {
                const newArgs = [...args, ...moreArgs];
                return f1(...newArgs);
            }
        }
    };
}

在上述代码中,curry函数接受一个函数fn作为参数,然后返回一个新的函数f1。如果f1接收的参数个数大于或等于fn的参数个数,就直接调用fn,否则返回一个新的函数f2,这个函数会将新的参数和旧的参数合并,然后递归调用f1

如何使用函数柯里化?

下面这个例子,演示如何使用上面的curry函数:


// 原始函数
function multiply(a, b, c) {
    return a * b * c;
}

// 柯里化后的函数
var curriedMultiply = curry(multiply);

// 使用柯里化后的函数
var temp = curriedMultiply(2);  // 返回一个新的函数
console.log(temp(3)(4));  // 输出 24

在上述代码中,我们首先定义了一个函数multiply,然后使用curry函数将其柯里化。通过调用柯里化后的函数,我们可以在不同的时间点提供不同的参数,并得到新的函数。最后,我们通过提供所有的参数,得到了最终的结果。

总结下函数柯里化的优点:

  1. 参数复用:柯里化可以使我们在定义函数时设置一些通用的参数,然后生成一个新的函数,我们在调用这个新的函数时只需要提供剩下的参数。这样可以减少重复代码,提高代码复用性。

    例如,如果我们有一个添加事件监听的函数,它需要元素、事件类型和处理函数作为参数。如果我们要为多个元素添加相同类型的事件和处理函数,我们可以把这个函数柯里化,预设事件类型和处理函数,然后为每个元素生成一个新的函数。

  2. 延迟执行:柯里化的函数在接收到足够的参数之前不会执行,而是返回一个新的函数,等待剩余的参数。这意味着我们可以在任何需要的时候提供参数,然后在最后一刻计算结果。
    这对于一些需要复杂计算的函数来说特别有用,我们可以把参数的收集和实际的计算分开,只在需要结果的时候进行计算。

  3. 提高代码可读性:通过柯里化,我们可以创建更具描述性的函数,提高代码的可读性和可维护性。这是因为柯里化的函数通常会有更具体的用途和更明确的函数名。

  4. 函数组合:柯里化可以使函数更容易组合。我们可以创建一系列的小函数,每个函数只做一件事,然后通过柯里化和函数组合来创建更复杂的函数。这是函数式编程的一种常见手法。

最后还是要提一点,柯里化函数的主要目标是提供参数复用和延迟执行的功能,而不是提高性能。因此,柯里化函数可能会比原始函数稍微慢一些,但对应用的性能影响微乎其微。

本文由mdnice多平台发布

标签:...,return,函数,JS,参数,柯里化,搞懂,fn
From: https://www.cnblogs.com/dawnyu/p/17718598.html

相关文章

  • delphi JSON序列化(四)
    {TDateTimeConverter}functionTDateTimeConverter.CanConvert(ATypeInf:PTypeInfo):Boolean;beginResult:=True;end;functionTDateTimeConverter.ReadJson(constAReader:TJsonReader;ATypeInf:PTypeInfo;constAExistingValue:TValue;constASerial......
  • 使用js开发一个快速打开前端项目的alfred插件
    使用js开发一个快速打开前端项目的插件目录前言使用的技术栈步骤问题发现待优化前言一直以来开发都是先打开vscode,然后选择项目,在项目多的情况下会觉得挺繁琐;如果同时打开了许多vscode窗口,寻找目标窗口也比较麻烦,于是萌生了开发一个alfred的工作流插件的想法,目标是在alf......
  • Three.js中实现对InstanceMesh的碰撞检测
    1.概述之前的文章提到,在Three.js中使用InstanceMesh来实现性能优化,可以实现单个Mesh的拾取功能那,能不能实现碰撞检测呢?肯定是可以的,不过Three.js中并没有直接的API可以实现对InstanceMesh的碰撞检测,需要手动实现回顾本文的描述的Three.js的场景前提:使用InstanceMesh来构建数......
  • javaweb运行tomcat时Jsp文件显示源码
    今天在写javaweb项目的时候出现了运行一直不打开浏览器,如果手动打开浏览器的话,就会出现自己写的jsp文件中的所有源码,具体如图所示我的问题在Servlet中因为要告诉jsp文件servlet在哪里所以要在类名的上一行写上@WebServlet("/Servlet"),但是由于我的粗心写成了@WebServlet("Servl......
  • vuejs+antv-g6绘制图表
    该内容包括antv-g6官网地址、antv-g6的基本使用(包括自定义节点、常用插件(右键菜单等)、基本事件、目前我所遇到的一些需求)。1、antv-g6的官网地址:https://g6.antv.antgroup.com/examples2、安装antv-g6组件npminstall@antv/g6 3、创建antvView.vue文件使用antv/g6......
  • JS 下载文件
    一、背景二、实现点击查看代码//下载文件exportfunctiondownloadFile(obj,name,suffix){consturl=window.URL.createObjectURL(newBlob([obj]))constlink=document.createElement('a')link.style.display='none'link.href=urlconstfi......
  • JS 构造树形
    一、背景List组装树形Tree二、实现点击查看代码listRolePurifySmalls().then(data=>{constlist=data||[]constmap={}list.forEach(item=>{letsmalls=map[item.divisionName]if(!smalls){smalls=[]......
  • JS 将列表转成树形结构数据
    一、背景联调发现有些后端返回List但是前后需要转树形结构二、实现点击查看代码import_,{isArray}from'lodash'/***将列表转成树形结构数据*@paramnodes列表数据*@paramoptions可选参数,{idKey,pIdKey,childrenKey}*@returns{[]}树形结构数据......
  • Json学习
    Json入门参考资料笔记教程视频教程JSON定义JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式,目前使用特别广泛。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编......
  • js小知识
    #js入门学习参考视频:https://www.bilibili.com/video/BV1JJ41177di/参考资料:https://www.cnblogs.com/gh110/p/15153662.html扩展:-数组的for-each-```jsvararr=[15,4,3,43,21,43,2,1,3,5];arr.forEach((element)=>{console.log(element......