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 匿名函数及其代码模式原理
Mar 19 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
jquery实现图片切换代码
Oct 13 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
原生JS生成指定位数的验证码
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实现用户认证及管理完全源码
2007/03/11 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php对称加密算法示例
2014/05/07 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
BootStrap中
2016/12/10 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python代码太长换行的实现
2019/07/05 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
邻里守望志愿服务活动方案
2014/08/15 职场文书
升职感谢信
2015/01/22 职场文书
团拜会主持词
2015/07/04 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
MySQL数据库完全卸载的方法
2022/03/03 MySQL