06.纯函数-柯里化实现-组合函数详解

章鱼妹爱前端
470 阅读6分钟

一、纯函数

1.理解JavaScript纯函数

  • 函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；
    • 在react开发中纯函数是被多次提及的；
    • 比如react中组件就被要求像是一个纯函数（为什么是像，因为还有class组件），redux中有一个reducer的概念，也
    • 是要求必须是一个纯函数；
    • 所以掌握纯函数对于理解很多框架的设计是非常有帮助的；
  • 纯函数的维基百科定义：
    • 在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：
    • 此函数在相同的输入值时，需产生相同的输出。
    • 函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。
    • 该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。
  • 当然上面的定义会过于的晦涩，所以我简单总结一下：
    • 确定的输入，一定会产生确定的输出；
    • 函数在执行过程中，不能产生副作用；

2.副作用的理解

  • 那么这里又有一个概念，叫做副作用，什么又是副作用呢？
    • 副作用（side effect）其实本身是医学的一个概念，比如我们经常说吃什么药本来是为了治病，可能会产生一些其他的副作用；
    • 在计算机科学中，也引用了副作用的概念，表示在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响，比如修改了全局变量，修改参数或者改变外部的存储；
  • 纯函数在执行的过程中就是不能产生这样的副作用：
    • 副作用往往是产生bug的 “温床”。

3.纯函数的案例

  • 我们来看一个对数组操作的两个函数：

    • slice：slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组；
    • splice：splice截取数组, 会返回一个新的数组, 也会对原数组进行修改；
    • slice就是一个纯函数，不会修改传入的参数；

    图片.png

  • 判断下面的函数是否为纯函数

    图片.png

    图片.png

    图片.png

4.纯函数的优势

  • 为什么纯函数在函数式编程中非常重要呢？
    • 因为你可以安心的编写和安心的使用；
    • 你在写的时候保证了函数的纯度，只是单纯实现自己的业务逻辑即可，不需要关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改；
    • 你在用的时候，你确定你的输入内容不会被任意篡改，并且自己确定的输入，一定会有确定的输出；
  • React中就要求我们无论是函数还是class声明一个组件，这个组件都必须像纯函数一样，保护它们的props不被修改：

二、JavaScript柯里化

1.柯里化的概念

  • 柯里化也是属于函数式编程里面一个非常重要的概念。
  • 我们先来看一下维基百科的解释：
    • 在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化；
    • 是把接收多个参数的函数，变成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数，而且返回结果的新函数的技术；
    • 柯里化声称 “如果你固定某些参数，你将得到接受余下参数的一个函数”；
  • 维基百科的结束非常的抽象，我们这里做一个总结：
    • 只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数；
    • 这个过程就称之为柯里化；

2.柯里化的结构

  • 右边是简化柯里化的代码 图片.png

3.让函数的职责单一

  • 那么为什么需要有柯里化呢？

  • 在函数式编程中，我们其实往往希望一个函数处理的问题尽可能的单一，而不是将一大堆的处理过程交给一个函数来处理；

  • 那么我们是否就可以将每次传入的参数在单一的函数中进行处理，处理完后在下一个函数中再使用处理后的结果；

  • 比如上面的案例我们进行一个修改：传入的函数需要分别被进行如下处理

  • 第一个参数 + 2

  • 第二个参数 * 2

  • 第三个参数 ** 2

    图片.png

4.柯里化的复用

  • 另外一个使用柯里化的场景是可以帮助我们可以复用参数逻辑：

    • makeAdder函数要求我们传入一个num（并且如果我们需要的话，可以在这里对num进行一些修改）；

    • 在之后使用返回的函数时，我们不需要再继续传入num了

      图片.png

5.打印日志的柯里化

  • 这里我们在演示一个案例，需求是打印一些日志：

  • 日志包括时间、类型、信息；

  • 普通函数的实现方案如下： 图片.png

  • 柯里化函数实现方案如下： 图片.png

6.自动柯里化函数

  • 目前我们有将多个普通的函数，转成柯里化函数： 图片.png

7.（补充）柯里化函数的实现面试题

①

图片.png

function curry(fn) {

    function curried(...args) {

        if (fn.length <= args.length) {

            return fn.apply(this, args)

        } else {

            function curried2(...args2) {

                //利用递归

                return curried.apply(this, [...args, ...args2])

                // 或者用args.concat(args2)

            }

            return curried2

        }

    }

    return curried

}

function add(x, y, z) {

return x + y + z

};

const addCurr = curry(add)

console.log(addCurr(1, 2, 3));            //6

console.log(addCurr(1, 2)(3));            //6

console.log(addCurr(1)(2)(3));            //6

学长给的思路

图片.png

②

图片.png

三、组合函数

1.理解组合函数

  • 组合（Compose）函数是在JavaScript开发过程中一种对函数的使用技巧、模式：

    • 比如我们现在需要对某一个数据进行函数的调用，执行两个函数fn1和fn2，这两个函数是依次执行的；
    • 那么如果每次我们都需要进行两个函数的调用，操作上就会显得重复；
    • 那么是否可以将这两个函数组合起来，自动依次调用呢？
    • 这个过程就是对函数的组合，我们称之为 组合函数（Compose Function）；

    图片.png

2.实现组合函数

刚才我们实现的compose函数比较简单，我们需要考虑更加复杂的情况：比如传入了更多的函数，在调用compose函数时，传入了更多的参数：

图片.png

avatar
文章
阅读
粉丝