彻底弄懂js函数柯里化

彻底弄懂js函数柯里化

  • 1、前言
  • 2、什么是柯里化
  • 3、实现原理
  • 4、应用场景
    • 4.1 参数复用
    • 4.2 遍历数组

1、前言

函数柯里化(Currying)在JavaScript中总感觉属于一种不温不火的存在,甚至有些开发者在提起柯里化时,竟然会有点生疏不懂。其实不然,对于它们的概念可能在日常开发中不太提到,但是它们的思想和用法,却在前端开发中经常借鉴和使用,它可以帮助我们写出更加优雅、灵活的代码。本文将介绍柯里化概念、实现原理和应用场景,希望对大家能有所帮助!

2、什么是柯里化

函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数,并且返回接收余下参数且返回结果的新函数的技术。
通过柯里化,我们可以将一个接受多个参数的函数转换为一个接受一个参数的函数序列。这意味着我们可以先传递一部分参数,然后传递剩余的参数,或者分别传递参数,以此灵活地处理函数的调用。

例如,下面是一个接受两个参数的普通函数:

function add(a, b) {return a + b
}

通过柯里化,我们可以将上述函数转换为一系列多个函数的调用:

function add(x) {return function(y) {return x + y;}
}

进行调用:

add(1, 2);	// 3
add(1)(2)   // 3

通过柯里化,我们可以轻松地创建具有更高可复用性和灵活性的函数。它在函数式编程中经常被使用,并且可以用于创建高阶函数和函数组合。

3、实现原理

函数柯里化的实现原理是利用闭包和递归。
具体步骤如下:

创建一个高阶函数,用于接受原函数的参数,并返回一个新函数。

在新函数内部,使用闭包来保存已经传入的参数。

在新函数内部,使用递归或者循环,判断是否所有参数都已经传入。若是,则执行原函数,并返回结果;若否,则继续返回新函数,接受下一个参数。

通过这样的方式,就可以实现柯里化函数。
以下是一个简单的示例代码展示柯里化的实现:

function currying(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn.apply(this, args);} else {return function (...nextArgs) {return curried.apply(this, args.concat(nextArgs));};}};
}// 原函数
function add(x, y, z) {return x + y + z;
}// 柯里化后的函数
const curriedAdd = currying(add);// 柯里化函数的调用
curriedAdd(1)(2)(3); // 返回 6// 也可以一次传入多个参数
curriedAdd(1, 2)(3); // 返回 6

在上述代码中,currying 函数是一个高阶函数,用于接受原函数并返回柯里化后的函数。curried 函数是柯里化后的函数,在每次调用时判断传入的参数数量是否满足执行原函数的条件。
通过递归调用,每次返回一个新的函数,直到传入的参数数量满足原函数的要求,然后执行原函数并返回结果。这样就实现了函数的柯里化。

4、应用场景

4.1 参数复用

柯里化实际是把简答的问题复杂化了,但是复杂化的同时,我们在使用函数时拥有了更加多的自由度。 而这里对于函数参数的自由处理,正是柯里化的核心所在。 柯里化本质上是降低通用性,提高适用性。
我们工作中会遇到各种需要通过正则检验的需求,比如校验电话号码、校验邮箱、校验身份证号、校验密码等, 这时我们会封装一个通用函数 checkByRegExp ,接收两个参数,校验的正则对象和待校验的字符串。

// 函数封装后
function checkByRegExp(regExp,string) {return regExp.test(string);  
}checkByRegExp(/^1\d{10}$/, '18642838455'); // 校验电话号码
checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'test@163.com'); // 校验邮箱

上面这段代码,乍一看没什么问题,可以满足我们所有通过正则检验的需求。 但是我们考虑这样一个问题,如果我们需要校验多个电话号码或者校验多个邮箱呢?
我们可能会这样做:

checkByRegExp(/^1\d{10}$/, '18642838455'); // 校验电话号码
checkByRegExp(/^1\d{10}$/, '13109840560'); // 校验电话号码
checkByRegExp(/^1\d{10}$/, '13204061212'); // 校验电话号码checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'test@163.com'); // 校验邮箱
checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'test@qq.com'); // 校验邮箱
checkByRegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, 'test@gmail.com'); // 校验邮箱

我们每次进行校验的时候都需要输入一串正则,再校验同一类型的数据时,相同的正则我们需要写多次,
这就导致我们在使用的时候效率低下,并且由于 checkByRegExp 函数本身是一个工具函数并没有任何意义,
一段时间后我们重新来看这些代码时,如果没有注释,我们必须通过检查正则的内容,
我们才能知道我们校验的是电话号码还是邮箱,还是别的什么。
此时,我们可以借助柯里化对 checkByRegExp 函数进行封装,以简化代码书写,提高代码可读性。

//进行柯里化
let _check = currying(checkByRegExp);
//生成工具函数,验证电话号码
let checkCellPhone = _check(/^1\d{10}$/);
//生成工具函数,验证邮箱
let checkEmail = _check(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/);checkCellPhone('18642838455'); // 校验电话号码
checkCellPhone('13109840560'); // 校验电话号码
checkCellPhone('13204061212'); // 校验电话号码checkEmail('test@163.com'); // 校验邮箱
checkEmail('test@qq.com'); // 校验邮箱
checkEmail('test@gmail.com'); // 校验邮箱

再来看看通过柯里化封装后,我们的代码是不是变得又简洁又直观了呢。
经过柯里化后,我们生成了两个函数 checkCellPhonecheckEmail
checkCellPhone 函数只能验证传入的字符串是否是电话号码,
checkEmail 函数只能验证传入的字符串是否是邮箱,
它们与 原函数 checkByRegExp 相比,从功能上通用性降低了,但适用性提升了。
柯里化的这种用途可以被理解为:参数复用

4.2 遍历数组

let list = [{name:'lucy',age: 20},{name:'jack',age: 23}
]

我们需要获取数据中的所有 name 属性的值,常规思路下,我们会这样实现:

let names = list.map(function(item) {return item.name;
})

那么我们如何用柯里化的思维来实现呢

let prop = curry(function(key,obj) {return obj[key];
})
let names = list.map(prop('name'))

看到这里,可能会有疑问,这么简单的例子,仅仅只是为了获取 name 的属性值,为何还要实现一个 prop 函数呢,这样太麻烦了吧。
我们可以换个思路,prop 函数实现一次后,以后是可以多次使用的,所以我们在考虑代码复杂程度的时候,是可以将 prop 函数的实现去掉的。
我们实际的代码可以理解为只有一行 let names = list.map(prop('name'))
这么看来,通过柯里化的方式,我们的代码变得更精简了,并且可读性更高了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/88447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于埋点上报

一、埋点上报结构包含哪些? 埋点上报结构一般包含以下信息: 事件名称:标识上报的是哪个事件,例如“注册成功”或“点击按钮”等。事件发生时间:记录事件发生的时间戳。用户ID:标识事件所属的用户。设备信息…

Vue实现Hello World

<div id"aa"> <p>{{h}}</p> </div> <script src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js"></script> <script> const hello new Vue({ el:#aa, data:{ h : Hello World } }) </script>

Konva基本处理流程和相关架构设计

前言 canvas是使用JavaScript基于上下文对象进行2D图形的绘制的HTML元素&#xff0c;通常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。基于Canvas之上&#xff0c;诞生了例如 PIXI、ZRender、Fabric、Konva等 Canvas渲染引擎&#xff0c;兼顾易用的同时…

TCP协议与UDP协议

TCP&#xff08;传输控制协议&#xff09;和UDP&#xff08;用户数据报协议&#xff09;是两种常见的互联网传输协议&#xff0c;它们在数据传输方面有一些重要的区别&#xff1a; 连接性&#xff1a;TCP是面向连接的协议&#xff0c;而UDP是无连接的协议。这意味着在使用TCP进…

基于微信小程序的电影院订票系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言运行环境说明用户微信小程序端的主要功能有&#xff1a;管理员的主要功能有&#xff1a;具体实现截图详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考论文参考源码获取 前言 &#x1f497;博主介绍&…

ASCII码-对照表

ASCII 1> ASCII 控制字符2> ASCII 显示字符3> 常用ASCII码3.1> 【CR】\r 回车符3.2> 【LF】\n 换行符3.3> 不同操作系统&#xff0c;文件中换行 1> ASCII 控制字符 2> ASCII 显示字符 ASCII&#xff08;American Standard Code for Information Interc…

【计算机网络】IP协议

目录 前言 IP协议 基本概念 IP协议格式 分片 16位标识 3位标志与13位片偏移 分片流程 网段划分 网络号和主机号 DHCP协议 CIDR划分方案 特殊的ip地址 ip地址数量限制 私有ip地址与公网ip地址 路由转发 前言 我们前面讲了HTTP/HTTPS协议和TCP/…

ElementUI - 主页面--动态树右侧内容管理

一.左侧动态树 1.定义组件 ①样式&数据处理 <template><el-menu class"el-menu-vertical-demo" background-color"#334157"text-color"#fff" active-text-color"#ffd04b" :collapse"collapsed" router :def…

centos7通过docker搭建nginx+php环境

以下环境都是基于centos7.9完成。 1.安装docker yum install docker-ce 说明&#xff1a;这一步&#xff0c;由于centos软件仓库没有收纳docker&#xff0c;需要自己去官网爬文档安装。 安装完成之后&#xff0c;就是启动docker服务以及添加到开机启动。 systemctl enable do…

相乘(蓝桥杯)

相乘 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 小蓝发现&#xff0c;他将 1 至 1000000007 之间的不同的数与 2021 相乘后再求除以 1000000007 的余数&#xff0c;会得到不同的数。 小蓝想知道&#xff0c;能不能在 1 …

WordPress主题开发( 七)之—— 模版文件继承规则

WordPress主题开发&#xff08; 七&#xff09;之—— 模版文件继承规则 概述模板文件层次结构示例可视化概述层次结构详细信息主页显示首页显示单文章页面单页分类目录标签自定义分类自定义文章类型作者显示日期搜索结果404&#xff08;未找到&#xff09;附件嵌入功能非ASCII…

Spring Cloud Alibaba快速整合OpenFeign

文章目录 spring cloud alibaba 整合OpenFeign整合流程1.导入依赖2. 编写调用接口2.1 service&#xff08;这里写的是clients&#xff09;2.2 controller 3.设置其最大链接时间3.1 配置文件3.2 client3.3 接口3.4 被访问的controller spring cloud alibaba 整合OpenFeign Fore…

如何评估商城源码的安全性和稳定性?

评估商城源码的安全性和稳定性是选择合适的商城源码的关键一步。以下是一些方法和指标&#xff0c;可用于评估商城源码的安全性和稳定性。希望对大家有所帮助(仅供参考)。 1、源码质量 商城源码的质量是评估其安全性和稳定性的重要指标之一。我们技术可以检查源码的编码规范、…

【算法新题】TJOI2017-异或和

题目内容 原题链接 给定一个长度为 n n n 的整数数组 a a a &#xff0c;问所有子数组和的异或和是多少。 数据范围 1 ≤ n ≤ 1 0 5 1\leq n\leq 10^5 1≤n≤105 ∑ a i ≤ 1 0 6 \sum a_i\leq 10^6 ∑ai​≤106 题解 基本思路 本题是 ARC092D - Two Sequences 的同类型…

深拷贝与浅拷贝

首先深拷贝与浅拷贝 只针对Object 和Array这样的引用数据类型 所以基本数据类型不用考虑了 等号赋值 基本数据类型 对于基本数据类型&#xff0c;就会创建一个新的变量&#xff0c;并将原变量的值复制给新变量。 这是基于变量是存储在栈内存中的特点。简单来说&#xff0c;等…

分享三个国内可用的免费GPT-AI网站

AIchatOS国内的不需要梯子 AItianhu同上 国内百度的文心一言一样非常优秀

订阅《复现SCI文章系列教程》

写在前面 《小杜生信笔记》准备开启新的订阅专栏**《复现期刊文章系列教程》&#xff0c;本专栏小杜会寻找一些自己感兴趣的文章进行复现&#xff08;不说百分之百的复现&#xff0c;但是也会百分之八十进行复现&#xff09;。本期刊的教程代码会全部进行公开&#xff08;通过订…

数据结构:顺序表

SeqList.h #pragma once #include<stdio.h> #include<assert.h> #include<stdlib.h>typedef int SLDataType; //#define NULL 0typedef struct SeqList {SLDataType* a;int size;//顺序表中存储的有效元素的个数int capacity;//空间的大小 }SL;void SLInit(…

jupyterlab开发环境最佳构建方式

文章目录 背景jupyterlab环境构建运行虚拟环境构建以及kernel映射验证总结 背景 从jupyter notebook切换到了jupyter lab. 这里记录一下本地环境的最佳构建方式. jupyter lab 安装在jupyterlab-local的anaconda 虚拟环境中.建立多个其他虚拟环境安装各种python包实现环境隔离,…

一文了解亚马逊云科技适用于 Amazon Lightsail 的托管数据库

Amazon Lightsail 是亚马逊云科技提供的一种易上手使用、月度价格经济实惠&#xff0c;并包括了计算实例、容器、存储、数据库的虚拟专用服务器。在创建时可以进行业务蓝图选择&#xff0c;可选择包含多种操作系统&#xff08;Linux/Windows 等&#xff09;或操作系统加上典型应…