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组合函数的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript基础学习之splice()函数详解

    JavaScript基础学习之splice()函数详解

    目录 splice()函数详解 一.情况一(只有一个参数) 二.情况二 (两个参数) 三.情况三 (大于等于三个参数) 总结 splice()函数详解 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 参数: index —— 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置.howmany —— 必需.要删除的项目数量.如果设置为 0,则不会删除项目.item1, …, itemX —— 可选.向数组添加的新项目. 返回

  • Javascript面试经典套路reduce函数查重

    今天在偶然间查看到了一段代码,代码使用了很短的篇幅完成了字符串统计相同字符次数这个经典面试题,其中用到了reduce这个方法,网上查了查,没有查到什么有价值的东西,导致浪费了我一些时间才看懂,现将我的思路整理如下: 原代码: var arr="qweqrq" var info= arr.split('').reduce((a,b)=> (a[b]++ || (a[b]=1),a) ,{}) console.log(info) 代码思路是这样的,先将字符串arr通过split方法切

  • JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    本文实例讲述了JS前端面试必备--基本排序算法原理与实现方法.分享给大家供大家参考,具体如下: 排序算法是面试及笔试中必考点,本文通过动画方式演示,通过实例讲解,最后给出JavaScript版的排序算法 插入排序 算法描述: 1. 从第一个元素开始,该元素可以认为已经被排序 2. 取出下一个元素,在已经排序的元素序列中从后向前扫描 3. 如果该元素(已排序)大于新元素,将该元素移到下一位置 4. 重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置 5. 将新元素插入到该位置后 6. 重复

  • JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)组合函数(Composition)用法.分享给大家供大家参考,具体如下: 组合(Composition)函数,就是把两个或以上的函数组合到一块儿,整成一个新的函数.我找到了一个很好的例子,很好地解释了组合函数这个概念. 比如一个应用主要是记录一下日常的花销(expenses),应用里的数据看起来像这样: const expenses = [ { name: '租金', price: 3000, type:

  • 「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）

    「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）

    1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Prototype]](也就是__proto__)链接. 它使this指向新创建的对象.. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用将返回该对象引用. function New(func) { va

  • 如何在面试中手写出javascript节流和防抖函数

    面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖 1.节流函数throttle // 节流方案1,每delay的时间执行一次,通过开关控制 function throttle(fn, delay, ctx) { let isAvail = true return function () { let args = arguments // 开关打开时,执行任务 if (isAvail) { fn.apply(ctx,

  • JavaScript前端面试组合函数

    经历过一些列的函数式编程思想的学习总结,一些重要的高阶函数的学习,以及前一段时间关于 RxJS 的学习. 我们再回看一次 —— 组合函数 compose 本瓜越来越觉得,[易读]的代码应该是将声明和调用分开来的.根据不同的流程,用函数组合的方式.也可以说它是管道.或者说是链式调用,将声明的函数组合起来,再等待时机进行调用. 如果没有组合函数 compose,函数连续调用将会是嵌套的: const multi10 = function(x) { return x * 10; } const toS

  • JavaScript前端面试扁平数据转tree与tree数据扁平化

    JavaScript前端面试扁平数据转tree与tree数据扁平化

    目录 一.写在前面 二.正文部分 2.1 扁平数据转为 tree 数据 2.2 tree 数据转为扁平数据 2.3 完整测试 demo 三.写在后面 一.写在前面 有时我们拿到的数据的数据结构可能不是理想的,那么此时就要求前端程序员,具有改造数据的能力.例如拿到扁平的数据, 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中,这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构. 总之就是说,提供数据的接口给到的数据,未必符合要求,而当我们又无法令他人为为我

  • 前端面试JavaScript高频手写大全

    前端面试JavaScript高频手写大全

    目录 1. 手写instanceof 2. 实现数组的map方法 3. reduce实现数组的map方法 4. 手写数组的reduce方法 5. 数组扁平化 5. 1 es6提供的新方法 flat(depth) 5.2 利用cancat 6. 函数柯里化 7. 浅拷贝和深拷贝的实现 7.1浅拷贝和深拷贝的区别 8. 手写call, apply, bind 8.1 手写call 8.2 手写apply(arguments[this, [参数1,参数2.....] ]) 8.3 手写bind 9.

  • 前端JavaScript彻底弄懂函数柯里化curry

    前端JavaScript彻底弄懂函数柯里化curry

    目录 一.什么是柯里化( curry) 二.柯里化的用途 三.如何封装柯里化工具函数 一.什么是柯里化( curry) 在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术. 举例来说,一个接收3个参数的普通函数,在进行柯里化后, 柯里化版本的函数接收一个参数并返回接收下一个参数的函数, 该函数返回一个接收第三个参数的函数. 最后一个函数在接收第三个参数后, 将之前接收到的三个参数应用于原普通函数中,并返回最终结果. 数学和计算科学中的柯里化: // 数

  • JS前端面试数组扁平化手写flat函数示例

    目录 前言 题目 实现扁平化的方法 封装 flatten 1. ES6 flat 2. toString 3. 使用正则替换 4. 循环递归 4.1 循环 + concat + push 4.2 增加参数控制扁平化深度 4.3 巧用 reduce 4.4 使用 Generator 函数 5. 使用堆栈 stack 避免递归 6.while 循环+ some方法 前言 由于上半年参加了校招的技术面试, 前前后后面了20多个人了, 每次面试都会让应聘者手写一下数组扁平化flat(),但是发现居然没有

  • JavaScript前端实用的工具函数封装

    JavaScript前端实用的工具函数封装

    目录 1.webpack里面配置自动注册组件 2.自定义指令图片懒加载 3.图片文件转base64格式(实现预览) 4.数组转为tree型结构(递归实现) 5.递归深拷贝 6.将数组里面的对象转换成我们需要的键值对 1.webpack里面配置自动注册组件 第一个参数是匹配路径,第二个是深度匹配,第三个是匹配规则 const requireComponent = require.context('./libary', true, /\.vue$/) export default { install

  • JS一次前端面试经历记录

    本文实例讲述了JS一次前端面试经历.分享给大家供大家参考,具体如下: 最近公司在做一些战略调整,部门有不少老员工前辈们都陆陆续续的离职或者被离职了.而我所在的团队--网易菠萝,也被归并到游戏运营中心了.因为产品策划还没有出来.暂时没什么需求做,闲得有点e-g-g疼的,每天从早到晚都是待在公司看看书.刷刷知乎等.我真是命途多舛啊,还没有真正步入社会,就见证了一个上百人的事业部说没落就没落.甚至已看破红尘,连参加省公务员考试的计划都做好了.这可不是开玩笑的哈,已经在报名费和复习资料上花了两三百块啦,

  • JavaScript随机数的组合问题案例分析

    本文实例讲述了JavaScript随机数的组合问题.分享给大家供大家参考,具体如下: 随机数的组合问题在面试时是经常考的,比如之前我就被问到:"有一个可以生成1-5的随机数函数,怎样把它扩大到1-7?" 在解决这个问题之前,先来看看另外一个比较简单的问题:"有一个可以生成1-7的函数,怎样把它缩小到1-5?"下面是一个生成1-7函数random7: function random7() { return Math.floor(Math.random() * 7 +

  • Javascript前端优化代码

    if 判断的优化 JavaScript条件语句在我们平时的开发中是不可避免要用到的,但是很多时候我们的代码写的并不好,一连串的if-else或者多重嵌套判断都会使得代码很臃肿,下面举例进行优化. 需求:现在有 4 个产品,分别是手机.电脑.电视机.游戏机,当然每个产品显示的价格不一样. 1.最简单的方法:if 判断 let commodity = { phone: '手机', computer: '电脑', television: '电视', gameBoy: '游戏机', } function

随机推荐