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切换显示的效果实例代码
Feb 27 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 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 分库分表hash算法
2009/11/12 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
yii操作cookie实例简介
2014/07/09 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP中的self关键字详解
2019/06/23 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
javaScript基础详解
2017/01/19 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python读取oracle函数返回值
2016/07/18 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
django 模版关闭转义方式
2020/05/14 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
初中毕业生的自我评价
2014/03/03 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript