函数式编程

前言

最先了解函数式编程是从React开始的，后面Vue3 出现Composition API，使用之后发现函数式编程是真香，感觉这种编程范式跟有利于代码的组织和维护。

因此，就带大家了解一下函数式编程的。可能大家在项目编程过程中也有用到，没有去关注这一点。

啥是 函数式编程 ？

我们常听说面向过程编程、面向对象编程，其实这些包括函数式编程是编程范式。编程范式 可以理解为编程的风格。 在一个项目中 我们可能用到多种编程范式。

面向对象编程：把事物抽象成类和对象，通过封装、继承和多态来演示事物之间的关联。
面向过程编程：将操作分成多个步骤，一步一步完成。

函数式编程
在我们学习数学时，肯定会接触到一个概念叫函数y = f(x)，将同类运算通过映射的关系，表达出来。函数式编程的主要思想就是来源于数学中的函数 ，根据输入通过某种运算得到相应的输出。函数式编程不是指程序中的方法，是一种思想，描述的是一种数据映射的思想。

// 面向过程
let num = 3
let power1 = num * num

console.log(power1)

// 面向函数
function power(num) {
    return  num * num;
}

let power2 = power(3)
console.log(power2)

相关概念

在学习函数式编程之前，有一些函数相关的概念是要了解的，方便深入的了解函数式编程

• 函数是一等公民
• 高阶函数
• 闭包

函数是一等公民 First-class Function（头等函数）

一等公民这个概念是不是很高大上，官方解释：当一门编程语言的函数可以被当作变量一样用时，则称这门语言拥有头等函数。

因此一等公民拥以下几个特性：

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

其实在JavaScript中函数就是个普通的对象，因此拥有上述特性就不足为怪喽。

function foo() {
    console.log("foo--function!")
}
console.dir(foo)

函数存储在变量中
在下面代码中index1其实执行的操作就是add 函数，那我们只需要将add 直接赋值给 index2 即可

function add(a, b) {
    return a + b
}

let foo = {
    index1(a, b) {return add(a, b)},
    index (posts) { return Views.index(posts) },

    // 优化后
    index1:  add,
    index: Views.index
}

函数可以作为参数
函数A作为函数B的参数，可以使函数B功能性更广，函数A就相当于不同的条件，实现函数B的功能。而不需要关心函数B内部的逻辑，只需要知道函数B的功能，给出自己的条件（函数A）。
比如，下面我们模仿filter函数

// filter
function filter(arr, fn) {
    let result = []
    for(let i = 0 ,len = arr.length; i < len; i++) {
        if(fn(arr[i])) {
            result.push(arr[i])
        }
    }
    return result;
}

let arr = [1, 3, 5, 8, 10, 4]
// 偶数
let eventArr = filter(arr, (el) => {
    return el % 2 == 0
})
// 奇数
let oddArr = filter(arr, (el) => {
    return el % 2 == 1
})
console.log(eventArr, oddArr)

在上述例子中，我们只需要知道filter函数的作用是筛选数组中的某些元素，那么通过递不同的函数（条件）就能达到不同的筛选目的。

函数可以作为返回值
比如：

function makeFn() {
    let message = "Hello World!";
    return function() {
        console.log(message)
    }
}

let fn = makeFn();
fn();

函数作为返回值的实际支付例子：

function once(fn){
    let done = false;
    return function() {
        if(!done) {
            done = true;
            return fn.apply(this, arguments);
        }
    }
}

let pay = once(function(money) {
    console.log(`本次支付${money}元`);
})

pay(5);
pay(5);
pay(5);

版本

• 2021年8月14 形成初版