针要学前端 | JavaScript深度挖掘之函数式编程

大家好，我是指针。冬天到了，人也变懒了，为了让自己动起来，我报名参加了拉勾教育的大前端高薪训练营。学习需要总结，需要分享，需要鞭策，于是便有了《针爱学前端》这一系列，希望大家看完能够有收获。如果文章中有不对的地方，希望能批评指正，不吝赐教！！！

函数式编程是甚么

今天突然有人问我，指老师发生甚麽事啦，我说怎么回事，给我发了一段视频，我一看！嗷！源赖氏函数式编程。我啪的一下就解释了起来，很快啊！

其实说来也简单，函数式编程是一种编程的思想，注重于对运算过程的抽象。类似于数学函数之间的映射：y = f(x)，我只知道我输入x，要始终得到y，其中的计算过程抽象成f函数。

这么说还是有点绕啊，通俗的说，你需要计算a+b的和，c+d的和，你发现自己需要写两遍一模一样的相加逻辑，于是你选择将相加的逻辑写成了一个方法叫add。这样以后就算叫你计算e+f的和你也可以直接调用add方法，这其实就是函数式编程的思想，我们有时在工作中早就无形的使用到了它，只是不知道如何去描述它而已。

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

// 函数式
// 我们将计算过程封装在了一个方法里，add(x)的每次结果必然是相同的
// 但是我们却不必每次写x=>y的逻辑，因为我们已经抽象成立方法add
function add (a, b) {
   
    return a + b
}
let sum = add(1, 2)
cosole.log(sum)

为什么要学习函数式编程

• 用的越来越多，react，vue3都在用，用了都说好！
• 打包过程可以更好的利用tree shaking过滤无用代码（深了啊）。
• 生态也不错，有很多现成的库使用，如lodash、uderscore、ramda。
• 代码重用率高，开发快速。
• 函数式编程不依赖、也不会改变外界的状态，只要给定输入参数，返回的结果必定相同。因此，每一个函数都可以被看做独立单元，很有利于进行单元测试和除错，以及模块化组合。
• 函数式编程不修改变量，所以多个方法可以同时执行，而不必担心一个方法的数据被另一个方法修改，也就是方便并行处理。

函数式编程的知识点

• 函数是一等公民

  如果经常刷题的小伙伴应该下面的题目不陌生，这道题考的就是JavaScript中函数是一等公民的知识。

  // 问打印什么
  var a = 1
  console.log(a)
  var a = function () {
       
      
  }
  

  函数是一等公民的三个特性

  • 函数可以储存在变量中

  • 函数可以作为参数

  • 函数可以作为返回值

    // 在JavaScript中，函数就是一个普通对象（可以通过new Function()生成）
    // 既然是变量，那便可以赋值给变量，作为参数，作为返回值
    
    // 把函数赋值给变量
    let print = function (x) {
           
        console.log(x)
    }
    print("print")
    
    // 把函数作为参数(模拟foreach)
    function myForEach (array,fn) {
           
        for(let item of array) {
           
            fn(item)
        }
    }
    let arr = ["my", "name", "is", "zhizhen"]
    myForEach(arr, print)
    
    // 把函数作为返回值
    function returnFn () {
           
        let msg = "hello lagou"
        return print(msg)
    }
    

• 高阶函数（Higher-order function）

  什么是高阶函数

  • 参数可以是函数
  • 返回值可以是函数

  高阶函数的意义

  抽象的说就是：帮助我们抽象函数实现的细节，只需要我们关注输入与输出

  通俗的说就是：你需要遍历1个数组，然后打印，你只需要将打印的方法作为参数传到一个新的方法里，那么那个新的方法里就不需要再关注打印的方法了，只需要关注传入的数组就行。

  // 面向过程编程
  let array = [1, 2, 3, 4]
  for(let item of array) {
       
      console.log(item)
  }
  
  // 高阶函数
  function print (item) {
       
      cosole.log(print)
  }
  function map (arr, fn) {
       
      for(let item