JavaScript前端面试组合函数


Posted in Javascript onJune 21, 2022

经历过一些列的函数式编程思想的学习总结,一些重要的高阶函数的学习,以及前一段时间关于 RxJS 的学习。

我们再回看一次 —— 组合函数 compose

本瓜越来越觉得,【易读】的代码应该是将声明和调用分开来的。根据不同的流程,用函数组合的方式、也可以说它是管道、或者说是链式调用,将声明的函数组合起来,再等待时机进行调用。

如果没有组合函数 compose,函数连续调用将会是嵌套的:

const multi10 = function(x) { return x * 10; }
const toStr = function(x) { return `${x}`; }
const compute = function(x){ 
    return toStr(multi10(x))
}
compute(8)

fn3(fn2(fn1(fn0(x)))),层层嵌套是很容易看错的;

所以,必须尝试将调用层级扁平化!

compose 应运而生,它大概就会是这样:

const compose = function(f,g) { 
    return function(x) { 
        return f(g(x))
    }
}
let compute = compose(toStr, multi10)
compute(8)

通过使用compose函数我们可以把两个函数组合成一个函数,这让代码从右往左执行,而不是层层计算某个函数的结果作为另一个函数的参数,这样代码也更加直观。

当然,我们不能让 compose 限制于只能处理连续调用两个函数,于是支持任意参数版本的 compose 将是这样的:

function compose(...funs){ 
    return (x) =>funs.reduce((acc, fun) => fun(acc), x) 
}

通过函数组合,我们可以可以声明式地指定函数间的关系,代码的可读性也大大提高,也方便我们后续对代码进行扩展跟重构;

而且在React里面,当我们的高阶组件变多的时候,一个套着一个就很难看,我们就可以通过类似的方式来让我们的高阶组件层级扁平化;

这就是最最原始的 compose,以及它被提出的原始动机~~

以上就是JavaScript前端面试组合函数的详细内容,更多关于JavaScript组合函数的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
DIV菜单层实现代码
Nov 19 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
Vue实现点击显示不同图片的效果
Aug 10 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
Vue2项目中对百度地图的封装使用详解
JavaScript原型链中函数和对象的理解
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 #Javascript
5个实用的JavaScript新特性
Jun 16 #Javascript
字节飞书面试promise.all实现示例
Jun 16 #Javascript
JS轻量级函数式编程实现XDM三
Jun 16 #Javascript
JS轻量级函数式编程实现XDM二
Jun 16 #Javascript
You might like
PHP 在线翻译函数代码
2009/05/07 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python实现图片文件批量重命名
2020/03/23 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python中的全局变量如何理解
2020/06/04 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
董事长职责范文
2013/11/08 职场文书
员工工作表扬信范文
2014/01/13 职场文书
校庆口号
2014/06/20 职场文书
反邪教标语
2014/06/23 职场文书
男性健康日的活动方案
2014/08/18 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python