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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
JS重载实现方法分析
Dec 16 Javascript
JavaScript数组操作详解
Feb 04 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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多层数组与对象的转换实例代码
2013/08/05 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
在javascript中关于节点内容加强
2013/04/11 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python之Character string(实例讲解)
2017/09/25 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
四查四看剖析材料
2014/02/14 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
优秀教师事迹材料
2014/12/15 职场文书
招标保密承诺书
2015/01/20 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书