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 相关文章推荐
Jquery中"$(document).ready(function(){ })"函数的使用详解
Dec 30 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
js定时器实例分享
Dec 20 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
JavaScript动态生成表格的示例
Nov 02 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
原生js二级联动效果
2017/06/20 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python处理XML格式数据的方法详解
2017/03/21 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
详解Python time库的使用
2019/10/10 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python PIL库图片灰化处理
2020/04/07 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
灰雀教学反思
2014/04/28 职场文书
护士节策划方案
2014/05/19 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
人代会简报
2015/07/21 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Python中super().__init__()测试以及理解
2021/12/06 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android