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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP合并静态文件详解
2014/11/14 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
动态控制Table的js代码
2007/03/07 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
jquery获取radio值实例
2014/10/16 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Python中的字符串替换操作示例
2016/06/27 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
求职信模版
2013/11/30 职场文书
工作态度检讨书
2014/02/11 职场文书
转让协议书范本
2014/09/13 职场文书
企业2014年度工作总结
2014/12/10 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL