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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
js控制table合并具体实现
Feb 20 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 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
PHP中for循环语句的几种变型
2007/03/16 PHP
PHP 上传文件大小限制
2009/07/05 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
心得体会开头
2014/01/01 职场文书
采购部经理岗位职责
2014/02/10 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
修辞手法有哪些?
2019/08/29 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang