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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
简单了解JavaScript弹窗实现代码
May 07 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
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python发送邮件功能实现代码
2016/07/15 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python实现把类当做字典来访问
2019/12/16 Python
Python for循环与getitem的关系详解
2020/01/02 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
教师应聘自荐信范文
2014/03/14 职场文书
年终总结会主持词
2014/03/25 职场文书
商场主管竞聘书
2014/03/31 职场文书
公司合作意向书
2014/04/01 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript