JS 高程理解:柯里化 == 闭包+递归
lipiwang 2024-11-04 14:36 14 浏览 0 评论
柯里化是 JS 高程中不可或缺的重心,本篇带你来冲一冲它!!
我们不妨以两数相加为例子,递进说明。
我们通常是这样写一个函数来求得 两数相加 的值:
function sum(a,b){
console.log(a+b)
}
sum(1,2)
这样写一点毛病没有!
不过呢?问题总会在发展中产生,产品经理又要加一个值,需求:三数相加;
咱通常来说,第一时间,就在原基础上,直接再加一个参数就是了;
于是,修改后像是这样:
function sum(a,b,c){
console.log(a+b+c)
}
sum(1,2,3)
问:这样写,有毛病吗??
答:太有毛病了!
这样一改,既违反了:“开闭原则”、又违反了:“单一职责原则”。
为不太熟悉设计原则的小伙伴们,简单解释下:
- 什么是“开闭原则”?即:我们编程中要尽可能的避免直接修改函数、类或模块,而是要在原有基础上拓展它;
- 什么是“单一职责原则”?即:每个函数、类或模块,应该只负责一个单一的功能;
首先,咱修改了 sum 函数的传参以及内部的调用 ? 则违反“开闭原则”
其次,sum 函数本来只负责两数相加,修改后,它又负责三数相加,职责已经发生了变化 ? 则违反 “单一职责原则”;
如果正规按照单一责任来写,应该是:
// 负责两数相加
function sum2(a,b){
console.log(a+b)
}
// 负责三数相加
function sum3(a,b,c){
console.log(a+b+c)
}
事实上,是不可能这样去写的,因为如果有一万个数相加,得写一万个函数。
而 加法只有一个!! 不管你最终要加几个值,总是要一个加一个。
于是乎,我们设想,能不能写一个这样的函数:它的功能,就是“加”,参数跟几个,我就加几个。
// 负责“加法”,
function addCurry(){
...
...
...
}
addCurry(1)(2) // 两数相加
addCurry(1)(2)(3) // 三数相加
...
addCurry(1)(2)(3)...(n) // n 数相加
没错,这个函数就是:柯里化!!(或者说这个过程叫柯里化,这个思想叫柯里化,本瓜认为这里不需要太死扣定义)
接着,我们一步步来试试,它会是怎样构成的?
为了能够实现一个加一个,即存储参数的目的,我们想一想,还有什么法宝?
没错,JS 奥义:闭包!
其实,本瓜时常想,闭包的终极秘密是什么?最后将其理解为 4 个金光闪闪的大字:延迟处理!
什么意思?简单解释下:
function directHandle(a,b){
console.log("直接处理",a,b)
}
directHandle(111,222)
// 直接处理 111 222
function delayHandle(a){
return function(b){
console.log("延迟处理",a,b)
}
}
delayHandle(111)
// ? (b){
// console.log("延迟处理",a,b)
// }
如上 delayHandle(111) 不像 directHandle(111,222) 直接打印值,而是先返回一个函数 f(b);111 也被临时保存了,delayHandle(111)(222),则得到相同的输出。这就是:延迟处理的思想。
另外补一句:延迟处理是函数式编程的精华所在,在不能保证每个函数都是纯函数的前提下,在管道处理的最后,再进行处理,能最大程度的保证减少副作用。也就是 Monad 思想,此处不做展开。
言归正传,于是乎,我们借用闭包来实现最初版的柯里化:
// 两数相加
function addCurry(a){
return function(b){
console.log(a+b)
}
}
addCurry(1)(2)
// 三数相加
function addCurry(a){
return function(b){
return function(c){
console.log(a+b+c)
}
}
}
addCurry(1)(2)(3)
写两个闭包的过程,聪明的你一定就明白了,这样一直写下去,不就是递归吗?!
于是乎,我们知道,当参数是 n 个的时候,需要递归 n-1 次 return function
于是乎,addCurry 写法如下:
let arr = []
function addCurry() {
let arg = Array.prototype.slice.call(arguments); // 递归获取后续参数
arr = arr.concat(arg);
if (arg.length === 0) { // 如果参数为空,则判断递归结束
return arr.reduce((a,b)=>{return a+b}) // 求和
} else {
return addCurry;
}
}
addCurry(1)(2)(3)()
OK,至此,,大功告成!!
以上,用最简单的代码解释了 —— 为什么我说:柯里化 == 闭包+递归 ?
柯里化是一种思想,上面的 addCurry 可以说是最简单的一种实践。在函数式编程中,Curry 更是大放异彩,比如 compose(fn1)(fn2)(fn3)…(fnN)(args) 等等。
如果以后有人再问你柯里化,可以往这个方向上答。。。
我是掘金安东尼: 一名人气前端技术博主(文章 100w+ 阅读量)
终身写作者(INFP 写作人格)
坚持与热爱(简书打卡 1000 日)
我能陪你一起度过漫长技术岁月吗(以梦为马)
觉得不错,给个点赞和关注吧(这是我最大的动力 )b( ̄▽ ̄)d
相关推荐
- 前端入门——css 网格轨道详细介绍
-
上篇前端入门——cssGrid网格基础知识整体大概介绍了cssgrid的基本概念及使用方法,本文将介绍创建网格容器时会发生什么?以及在网格容器上使用行、列属性如何定位元素。在本文中,将介绍:...
- Islands Architecture(孤岛架构)在携程新版首页的实践
-
一、项目背景2022,携程PC版首页终于迎来了首次改版,完成了用户体验与技术栈的全面升级。作为与用户连接的重要入口,旧版PC首页已经陪伴携程走过了22年,承担着重要使命的同时,也遇到了很多问题:维护/...
- HTML中script标签中的那些属性
-
HTML中的<script>标签详解在HTML中,<script>标签用于包含或引用JavaScript代码,是前端开发中不可或缺的一部分。通过合理使用<scrip...
- CSS 中各种居中你真的玩明白了么
-
页面布局中最常见的需求就是元素或者文字居中了,但是根据场景的不同,居中也有简单到复杂各种不同的实现方式,本篇就带大家一起了解下,各种场景下,该如何使用CSS实现居中前言页面布局中最常见的需求就是元...
- CSS样式更改——列表、表格和轮廓
-
上篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,这篇文章分享列表、表格和轮廓,一起来看看吧。1.列表List1).列表的类型<ulstyle='list-...
- 一文吃透 CSS Flex 布局
-
原文链接:一文吃透CSSFlex布局教学游戏这里有两个小游戏,可用来练习flex布局。塔防游戏送小青蛙回家Flexbox概述Flexbox布局也叫Flex布局,弹性盒子布局。它决定了...
- css实现多行文本的展开收起
-
背景在我们写需求时可能会遇到类似于这样的多行文本展开与收起的场景:那么,如何通过纯css实现这样的效果呢?实现的难点(1)位于多行文本右下角的展开收起按钮。(2)展开和收起两种状态的切换。(3)文本...
- css 垂直居中的几种实现方式
-
前言设计是带有主观色彩的,同样网页设计中的css一样让人摸不头脑。网上列举的实现方式一大把,或许在这里你都看到过,但既然来到这里我希望这篇能让你看有所收获,毕竟这也是前端面试的基础。实现方式备注:...
- WordPress固定链接设置
-
WordPress设置里的最后一项就是固定链接设置,固定链接设置是决定WordPress文章及静态页面URL的重要步骤,从站点的SEO角度来讲也是。固定链接设置决定网站URL,当页面数少的时候,可以一...
- 面试发愁!吃透 20 道 CSS 核心题,大厂 Offer 轻松拿
-
前端小伙伴们,是不是一想到面试里的CSS布局题就发愁?写代码时布局总是对不齐,面试官追问兼容性就卡壳,想跳槽却总被“多列等高”“响应式布局”这些问题难住——别担心!从今天起,咱们每天拆解一...
- 3种CSS清除浮动的方法
-
今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。首先,这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。下面我就讲3种常用清除浮动的...
- 2025 年 CSS 终于要支持强大的自定义函数了?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!1.什么是CSS自定义属性CSS自...
- css3属性(transform)的一个css3动画小应用
-
闲言碎语不多讲,咱们说说css3的transform属性:先上效果:效果说明:当鼠标移到a标签的时候,从右上角滑出二维码。实现方法:HTML代码如下:需要说明的一点是,a链接的跳转需要用javasc...
- CSS基础知识(七)CSS背景
-
一、CSS背景属性1.背景颜色(background-color)属性值:transparent(透明的)或color(颜色)2.背景图片(background-image)属性值:none(没有)...
- CSS 水平居中方式二
-
<divid="parent"><!--定义子级元素--><divid="child">居中布局</div>...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)