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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 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数字游戏 计算24算法
2012/06/10 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
js模拟类继承小例子
2010/07/17 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
医护人员英文求职信范文
2013/11/26 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
给导游的表扬信
2014/01/10 职场文书
年终考核评语
2014/01/19 职场文书
高中毕业自我评价
2014/02/08 职场文书
远程研修随笔感言
2014/02/10 职场文书
岗位聘任书范文
2014/03/29 职场文书
企业文化标语大全
2014/06/10 职场文书
小班下学期个人总结
2015/02/12 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android