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的颜色选择插件实例代码
Oct 02 Javascript
json原理分析及实例介绍
Nov 29 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
js判断两个数组相等的5种方法
May 06 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python 一句话生成字母表的方法
2019/01/02 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
学校经典推荐信
2013/10/30 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
专题组织生活会方案
2014/06/15 职场文书
应届毕业生自荐信
2015/03/04 职场文书
党员反邪教心得体会
2016/01/15 职场文书
创业计划书之宠物店
2019/09/19 职场文书