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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
javascript每日必学之循环
Feb 19 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
vue 中的动态传参和query传参操作
Nov 09 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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js实现简单计算器
2015/11/22 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python操作MySQL数据库具体方法
2013/10/28 Python
python3.3实现乘法表示例
2014/02/07 Python
Python类属性与实例属性用法分析
2015/05/09 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python常见的格式化输出小结
2016/12/15 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python创建n行m列数组示例
2019/12/02 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Myholidays美国:在线旅游网站
2019/08/16 全球购物
电焊工岗位工作职责
2014/07/09 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
党支部工作总结2015
2015/04/01 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python