函数式编程

函数式编程

为什么要学习函数式编程以及什么是函数式编程，包括函数式编程的特性（纯函数、柯里化、函数组合等）

函数式编程就是利用纯函数来实现一些细粒度的函数，再通过函数的组合把这些细粒度的函数组合成为功能更强大的函数

为什么要学习函数式编程

函数式编程是非常古老的一个概念，早于第一台计算机的诞生。有兴趣的同学可以自行搜索，那我们为什么还要学习函数式编程，基于以下几点来简单说明下：

• 函数式编程是随着 React 的流行受到越来越多的关注
• Vue 3也开始拥抱函数式编程
• 函数式编程可以抛弃 this
• 打包过程中可以更好的利用 tree shaking 过滤无用代码
• 方便测试、方便并行处理
• 有很多库可以帮助我们进行函数式开发：lodash、underscore、ramda

函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编程。函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）,用一段代码来简单演示一下

// 求和
// 非函数式
let num1 = 1
let num2 = 2
let sum = num1 + num2
console.log(sum)

// 函数式
function add (n1, n2) {
    return n1 + n2
}
let sum = add(1, 2)
console.log(sum)
// 函数式这个例子就是表示对运算过程进行抽象，另外函数式编程中的函数指的不是程序中的函数(方法)，而是数学中的函数即映射关系，并且要求相同的输入始终要有相同的输出

函数式编程的前置知识

一、函数是一等公民几个点：

• 函数可以存储在变量中
• 函数作为参数
• 函数作为返回值

二、高阶函数两个定义：

• 可以把函数作为参数传递给另一个函数（比如数组的 forEach 方法，让我们举个例子）

// 模拟 forEach
function forEach(arr, fn) {
    for(let i = 0; i < arr.length; i++) {
        fn(arr[i])
    }
}
// 测试
let arr = [1, 2, 3, 4]
forEach(arr, function (item) {
    console.log(item)
})
// 结果 1 2 3 4

• 函数作为返回值

function makeFn () {
    let msg = 'Hello'
    return function () {
        console.log(msg)
    }
}

const fn = makeFn()
fn()
// 结果 Hello

高阶函数的意义主要是抽象通用的问题，比如 forEach 我们不需关注循环的具体实现，只需要做我们要达成的事情就行。

三、闭包：

• 可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员。
• 本质：函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除，但是
  堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员

函数式编程的核心概念

前面介绍的是基础，接下来讲述第一个核心，纯函数

纯函数讲的是：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用。，比如说数组的操作方法 slice 和 splice：

• slice 返回数组中的指定部分，不会改变原数组（纯函数）
• splice 对数组进行操作返回该数组，会改变原数组

纯函数的好处：可缓存，因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数的结果缓存起来

function memoize(f) {
    let cache = {}
    return function () {
        let key = JSON.stringify(arguments)
        cache[key] = cache[key] || f.apply(f, arguments)
        return cache[key]
    }
}

如果纯函数依赖于外部的状态就无法保证输出相同，就会带来副作用。

第二个是函数柯里化：用一段简单的代码来表示

function getSum (a, b, c) {
    return a + b + c
}

function curry (func) {
    return function curriedFn(...args) {
        // 判断实参和形参的个数
        if(args.length < func.length) {
            return function () {
                return curriedFn(...args.concat(Array.from(arguments)))
            }
        }
        return func(...args)
    }
}

const curried = curry(getSum)

console.log(curried(1, 2, 3))
console.log(curried(1)(2, 3))
console.log(curried(1, 2)(3))
// 6 6 6

• 柯里化可以让我们给一个函数传递较少的参数得到一个已经记住了某些固定参数的新函数
• 这是一种函数参数的缓存
• 让函数变的更灵活，让函数的粒度更小
• 可以把多元函数转换成一元函数，可以组合使用函数产生强大的功能

第三个是函数组合：纯函数和柯里化很容易写出洋葱代码h(g(f(x)))，比如说获取数组的最后一个元素再转换成大写字母，xx.toUpper(xx.first(xx.reverse(array)))，而函数组合可以让我们把细粒度的函数重新组合生成一个新的函数。概念如下：

• 如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数
• 函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终结果
• 函数组合默认是从右到左执行
• 举个例子

// 组合函数
function compose (f, g) {
    return function(value) {
        return f(g(value))
    }
}

function reverse (array) {
    return array.reverse()
}

function first (array) {
    return array[0]
}

const last = compose(first, reverse)
console.log(last([1, 2, 3, 4]))
// 结果 4

虽然这个代码比较麻烦，但是这些辅助函数可以任意的组合。所以函数式编程可以最大的重用