JavaScript前端面试组合函数

 更新时间:2022年06月16日 11:30:45   作者:掘金安东尼  
这篇文章主要为大家介绍了JavaScript前端面试组合函数详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

经历过一些列的函数式编程思想的学习总结,一些重要的高阶函数的学习,以及前一段时间关于 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组合函数的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript 对象详细整理总结

    JavaScript 对象详细整理总结

    这篇文章主要介绍了JavaScript 对象详细整理总结的相关资料,需要的朋友可以参考下
    2016-09-09
  • 微信小程序 Canvas增强组件实例详解及源码分享

    微信小程序 Canvas增强组件实例详解及源码分享

    这篇文章主要介绍了微信小程序 Canvas增强组件实例详解及源码分享的相关资料,WeZRender是一个微信小程序Canvas增强组件,这里详细介绍,需要的朋友可以参考下
    2017-01-01
  • 独立使用umi的核心插件模块示例详解

    独立使用umi的核心插件模块示例详解

    这篇文章主要为大家介绍了独立使用 umi 的核心插件模块示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 前端JavaScript之Promise

    前端JavaScript之Promise

    这篇文章主要介绍关于前端JavaScript的Promise,Promise 是异步编程的一种解决方案,下面文章我们就来看看Promise的基本用法及各种方法,需要的朋友可以参考一下,希望对你有所帮助
    2021-10-10
  • 利用js实现简单开关灯代码

    利用js实现简单开关灯代码

    这篇文章主要分享的是如何利用js实现简单开关灯代码,下面文字围绕js实现简单开关灯的相关资料展开具体内容,需要的朋友可以参考以下,希望对大家又所帮助
    2021-11-11
  • 前端框架ECharts dataset对数据可视化的高级管理

    前端框架ECharts dataset对数据可视化的高级管理

    这篇文章主要为大家介绍了前端框架ECharts dataset对数据可视化的高级管理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Three.js相机Camera控件知识梳理

    Three.js相机Camera控件知识梳理

    这篇文章主要为大家介绍了Three.js相机Camera控件知识梳理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序 动画的简单实例

    微信小程序 动画的简单实例

    这篇文章主要介绍了微信小程序 动画的简单实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • JavaScript中的设计模式 单例模式

    JavaScript中的设计模式 单例模式

    这篇文章主要给大家介绍的是JavaScript中的单例模式,设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案,需要的朋友可以参考一下
    2021-09-09
  • JavaScript 与 TypeScript之间的联系

    JavaScript 与 TypeScript之间的联系

    这篇文章主要介绍了 JavaScript 与 TypeScript之间的联系,JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言。这是一个高级别的、通常是即时编译的、多范式的。TypeScript 是一种强类型、面向对象的编译语言,更多消息内容,需要的朋友可以参考一下下面文章内容
    2021-11-11

最新评论