小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

函数式编程

为什么要学习函数式编程

函数式编程是非常古老的一个概念，函数式编程的历史,早于第一台计算机的诞生。

那我们为什么现在还要学函数式编程？

函数式编程是随着 React 的流行受到越来越多的关注

Vue 3也开始拥抱函数式编程

函数式编程可以抛弃 this

打包过程中可以更好的利用 tree shaking 过滤无用代码

方便测试、方便并行处理

有很多库可以帮助我们进行函数式开发：lodash、underscore、ramda

什么是函数式编程

函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编程。

面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系
函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）
程序的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和

输出的函数x -> f(联系、映射) -> y，y=f(x)

函数式编程中的函数指的不是程序中的函数**(方法)，而是数学中的函数即映射关系，例如：y= sin(x)，x和y的关系相同的输入始终要得到相同的输出(纯函数)函数式编程用来描述数据(函数)之间的映射

前置知识

函数是一等公民

高阶函数

闭包

函数是一等公民

MDN First-class Function

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

在 JavaScript 中函数就是一个普通的对象 (可以通过 new Function() )，我们可以把函数存储到变量/

数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new

Function('alert(1)') 来构造一个新的函数。

把函数赋值给变量

// 把函数赋值给变量
let fn = function () { 

console.log('Hello First-class Function') 

}

fn() 

// 一个示例 

const BlogController = { 

index (posts) { return Views.index(posts) }, 

show (post) { return Views.show(post) }, 

create (attrs) { return Db.create(attrs) }, 

update (post, attrs) { return Db.update(post, attrs) }, 

destroy (post) { return Db.destroy(post) } 

}

// 优化 

const BlogController = { 

index: Views.index, 

show: Views.show, 

create: Db.create, 

update: Db.update, 

destroy: Db.destroy 

}

高阶函数

什么是高阶函数

高阶函数 (Higher-order function)
可以把函数作为参数传递给另一个函数
可以把函数作为另一个函数的返回结果
函数作为参数

// 函数作为参数值 forEach
function forEach(arr,fn){
    for (let index = 0; index < arr.length; index++) {
         fn(arr[index])
    }
}
let arr = [1,5,6,9,7,5,6]
forEach(arr,function(i){
   console.log(i)
})


// filter
function filter(array,fn){
    let results = [];
    for (let index = 0; index < array.length; index++) {
        if (fn(array[index])) {
            results.push(array[index]);
        }
        
    }
    return results;
}
let arr = [1,5,6,9,7,5,6]
let res = filter(arr,function(i){
   return i >= 6
})

console.log(res); //[ 6, 9, 7, 6 ]

函数作为返回值

// 高阶函数- 函数作为返回值
function makeFn(){
    let msg = "hello Function"
    return function(){
        console.log(msg);
    }
}
//  const fn = makeFn()
//  fn()
makeFn()()

// once
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}RMB`);
})

pay(5)
pay(5)
pay(5)
pay(5)
pay(5)
// 多次执行只会执行一次

使用高阶函数的意义

抽象可以帮我们屏蔽细节，只需要关注我们的目标
高阶函数是用来抽象通用的问题

常用高阶函数

forEach
map
filter
every
some
find/findIndex reduce
sort ……

// 模拟常用高阶函数
// map
const map = (array,fn) =>{
   let results = []
   for (let value of array){
       results.push(fn(value))
   }
   return results
}

// 测试
let arr = [1,2,3,4]
let arr1 = map(arr,(v) => {
    return v ** 2
})
console.log(arr1);


// every
const every = (array,fn) => {
    let result = true
    for(let val of array){
        result = fn(val)
        if (!result) {
            break
        }
    }
    return result
}

let arr = [9,6,54,8,35,6]
let bl = every(arr,(v) => {
    return v > 3 
}) 
console.log(bl);

// some
const some = (array,fn) => {
    let result = false
    for(let val of array){
        result = fn(val)
        if (result) {
            break
        }
    }
    return result
}
let arr = [2,6,54,8,38,6]
let bl = some(arr,(v) => {
    return v % 2 !== 0 
}) 
console.log(bl);

闭包

闭包 (Closure)：函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包。
可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员
闭包的本质：函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除，但是堆上的作用域成员因为被外部引用不能释放，因此内部函数依然可以访问外部函数的成员
闭包案例

// 生成计算数字的多少次幂的函数 
function makePower (power) { 
    return function (x) { 
        return Math.pow(x, power) 
        }
    }
let power2 = makePower(2) 
let power3 = makePower(3) 
console.log(power2(4)) 
console.log(power3(4))

// 第一个数是基本工资，第二个数是绩效工资 
function makeSalary (x) { 
    return function (y) { 
        return x + y 
    } 
}
let salaryLevel1 = makeSalary(1500) 
let salaryLevel2 = makeSalary(2500) 
console.log(salaryLevel1(2000)) 
console.log(salaryLevel1(3000))

纯函数

纯函数概念

纯函数：相同的输入永远会得到相同的输出，而且没有任何可观察的副作用
纯函数就类似数学中的函数(用来描述输入和输出之间的关系)，y = f(x)
lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库(lodash 的 fp 模块提供了对函数式编程友好的方法)，提供了对数组、数字、对象、字符串、函数等操作的一些方法
数组的 slice 和 splice 分别是：纯函数和不纯的函数
slice 返回数组中的指定部分，不会改变原数组
splice 对数组进行操作返回该数组，会改变原数组

let numbers = [1, 2, 3, 4, 5] 
// 纯函数 
numbers.slice(0, 3) 
// => [1, 2, 3] 
numbers.slice(0, 3) 
// => [1, 2, 3] 
numbers.slice(0, 3) 
// => [1, 2, 3] 
// 不纯的函数 
numbers.splice(0, 3) 
// => [1, 2, 3] 
numbers.splice(0, 3) 
// => [4, 5] 
numbers.splice(0, 3) 
// => []

函数式编程不会保留计算中间的结果，所以变量是不可变的（无状态的）
我们可以把一个函数的执行结果交给另一个函数去处理

纯函数的好处

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

const _ = require('lodash') 
function getArea (r) { 
    return Math.PI * r * r 
}
let getAreaWithMemory = _.memoize(getArea) 
console.log(getAreaWithMemory(4))

自己模拟一个 memoize 函数
可测试
纯函数让测试更方便
并行处理
在多线程环境下并行操作共享的内存数据很可能会出现意外情况
纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数 (Web Worker)

副作用

纯函数：对于相同的输入永远会得到相同的输出，而且没有任何可观察的副作用

// 不纯的 
let mini = 18 
function checkAge (age) { 
    return age >= mini 
}
// 纯的(有硬编码，后续可以通过柯里化解决) 
function checkAge (age) { 
    let mini = 18 
    return age >= mini 
}

副作用让一个函数变的不纯(如上例)，纯函数的根据相同的输入返回相同的输出，如果函数依赖于外部的状态就无法保证输出相同，就会带来副作用。副作用来源：

配置文件
数据库
获取用户的输入 …… 所有的外部交互都有可能带来副作用，副作用也使得方法通用性下降不适合扩展和可重用性，同时副作用会给程序中带来安全隐患给程序带来不确定性，但是副作用不可能完全禁止，尽可能控制它们在可控范围内发生。

柯里化

使用柯里化

// 函数的柯里化
// function checkAge(min){
//     return function(age){
//          return age >= min
//     }
// }
let checkAge = min => (age => age>= min)
let f18 = checkAge(18)
let f20 = checkAge(20)
let f22 = checkAge(22)

console.log(f18(18));
console.log(f20(18));
console.log(f22(18));

柯里化 (Currying)：
当一个函数有多个参数的时候先传递一部分参数调用它（这部分参数以后永远不变）
然后返回一个新的函数接收剩余的参数，返回结果

lodash 中的柯里化函数

_.curry(func)
功能：创建一个函数，该函数接收一个或多个 func 的参数，如果 func 所需要的参数都被提供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数。
参数：需要柯里化的函数
返回值：柯里化后的函数

const _ = require('lodash')

function getSUM(a, b, c){
   return a + b + c
}
const curried = _.curry(getSUM)
let curried1=curried(1,2)
console.log(curried1(7));

柯里化案例

//柯里化案例
// "".match(/\s+/g)
// "".match(/\d+/g)


// function match(reg,str){
//     return str.match(reg)
// }

// function match(reg){
//     return function(str){
//         return str.match(reg)
//     }
// }
const match = _.curry(function (reg,str){
    return str.match(reg)
})

const haveSpace = match(/\s+/g)
const haveNumber = match(/\d+/g)
// console.log(haveSpace("helloworld"));
// console.log(haveNumber("hell55"));

const filter = _.curry(function(func,array){
    return array.filter(func)
})

// console.log(filter(haveSpace,["jack","jsa ","jiayou","ba ty"]));
const findSpace = filter(haveSpace);

console.log(findSpace(["jack","jsa ","jiayou","ba ty"]));

柯里化原理模拟

function getSUM(a, b, c){
   return a + b + c
}
const curried = curry(getSUM)
let curried1=curried(1)
console.log(curried1(2,7));

function curry(func){
 
    return function curriedFn(...args){
        //  判断传入的参数 与 传入的函数的形参个数是否相同
        if (args.length<func.length) {
            return function(){
                 return curriedFn(...args,...arguments)
            }
        }
        return func(...args)
    }
}

总结

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

函数组合

纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))
获取数组的最后一个元素再转换成大写字母， .toUpper(.first(_.reverse(array)))
函数组合可以让我们把细粒度的函数重新组合生成一个新的函数
函数组合 (compose)：如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间过程的函数合并成一个函数
函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终结果
函数组合默认是从右到左执行

// 函数组合演示
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,5,6]));

lodash 中的组合函数

lodash 中组合函数 flow() 或者 flowRight()，他们都可以组合多个函数
flow() 是从左到右运行
flowRight() 是从右到左运行，使用的更多一些

const _ = require("lodash")

const reverse = arr => arr.reverse()
const first = arr => arr[0]
const toUpper = s => s.toUpperCase()

const f = _.flowRight(toUpper,first,reverse)

console.log(f(["one","two","three"]));

模拟lodash函数组合

// 模拟lodash函数组合
function compose (...args){
   return function(value){
      return args.reverse().reduce((acc,fn)=>(fn(acc)),value)
   } 
}

函数组合要满足结合律

// 函数组合要满足结合律

const _ = require("lodash")
// const f = _.flowRight(_.toUpper,_.first,_.reverse)

const f = _.flowRight(_.flowRight(_.toUpper,_.first),_.reverse)

console.log(f(["one","two","three"]));

调试
如何调试组合函数

const _ = require('lodash') 
const trace = _.curry((tag, v) => { console.log(tag, v) return v })const split = _.curry((sep, str) => _.split(str, sep)) 
const join = _.curry((sep, array) => _.join(array, sep)) 
const map = _.curry((fn, array) => _.map(array, fn)) 
const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' ')) console.log(f('NEVER SAY DIE'))

lodash/fp
lodash 的 fp 模块提供了实用的对函数式编程友好的方法
提供了不可变 auto-curried iteratee-first data-last 的方法

// lodash/fp 模块 
const fp = require('lodash/fp') 
fp.map(fp.toUpper, ['a', 'b', 'c']) 
fp.map(fp.toUpper)(['a', 'b', 'c']) 
fp.split(' ', 'Hello World') 
fp.split(' ')('Hello World')
const fp = require('lodash/fp') 
const f = fp.flowRight(fp.join('-'), fp.map(_.toLower), fp.split(' ')) 
console.log(f('NEVER SAY DIE'))

Point Free

Point Free：我们可以把数据处理的过程定义成与数据无关的合成运算，不需要用到代表数据的那个参数，只要把简单的运算步骤合成到一起，在使用这种模式之前我们需要定义一些辅助的基本运算函数。
不需要指明处理的数据
只需要合成运算过程
需要定义一些辅助的基本运算函数

// 非 Point Free 模式 
// Hello World => hello_world 
function f (word) { 
    return word.toLowerCase().replace(/\s+/g, '_'); 
}
// Point Free 
const fp = require('lodash/fp') 
const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower) 
console.log(f('Hello World'))

Functor(函子)

为什么要学函子

到目前为止已经已经学习了函数式编程的一些基础，但是我们还没有演示在函数式编程中如何把副作用控制在可控的范围内、异常处理、异步操作等。

什么是 Functor

容器：包含值和值的变形关系(这个变形关系就是函数)
函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运
行一个函数对值进行处理(变形关系)

class Contaier{
    static of(value){
        return  new Contaier(value)
    }
    constructor(value){
       this._value = value
    }
    map(fn){
        return  Contaier.of(fn(this._value))
    }
}

let r = Contaier.of(5).map( x => x+1).map(x => x ** 2)
console.log(r);  //Contaier { _value: 36 }

函子总结

函数式编程的运算不直接操作值，而是由函子完成
函子就是一个实现了 map 契约的对象
我们可以把函子想象成一个盒子，这个盒子里封装了一个值
想要处理盒子中的值，我们需要给盒子的 map 方法传递一个处理值的函数（纯函数），由这个函数来对值进行处理
最终 map 方法返回一个包含新值的盒子（函子）
在 Functor 中如果我们传入 null 或 undefined

// 值如果不小心传入了空值(副作用) 
Container.of(null) .map(x => x.toUpperCase()) 
// TypeError: Cannot read property 'toUpperCase' of null

MayBe 函子

我们在编程的过程中可能会遇到很多错误，需要对这些错误做相应的处理
MayBe 函子的作用就是可以对外部的空值情况做处理（控制副作用在允许的范围）

// MayBe 函子
class MayBe{
    static of(value){
        return  new MayBe(value)
    }
    constructor(value){
       this._value = value
    }
    map(fn){
        return this.isNothing()? MayBe.of(null) : MayBe.of(fn(this._value))
    }
    isNothing(){
        return this._value === null || this._value === undefined
    }
}
// let r = MayBe.of("Hello World").map( x => x.toUpperCase())
// console.log(r); //MayBe { _value: 'HELLO WORLD' }
// let r = MayBe.of(null).map( x => x.toUpperCase())
// console.log(r); //MayBe { _value: null }

在 MayBe 函子中，我们很难确认是哪一步产生的空值问题，如下例：

let r = MayBe.of("Hello World").map( x => x.toUpperCase()).map( x => null).map( x => x.split(" ") )
console.log(r); // MayBe { _value: null }

Either 函子

Either 两者中的任何一个，类似于 if...else...的处理
异常会让函数变的不纯，Either 函子可以用来做异常处理

// Either 函子

class Left{
    static of(value){
        return  new Left(value)
    }
    constructor(value){
       this._value = value
    }
    map(fn){
        return  this
    }
}

class Right{
    static of(value){
        return  new Right(value)
    }
    constructor(value){
       this._value = value
    }
    map(fn){
        return  Right.of(fn(this._value))
    }
}

// let r1 = Right.of(12).map( x => x + 2);
// let r2 = Left.of(12).map( x => x + 2);
// console.log(r1); //Right { _value: 14 }
// console.log(r2); //Left { _value: 12 }
function parseJson(str){
    try {
        return Right.of(JSON.parse(str))
    } catch (e) {
        return Left.of({error:e.message})
    }
}
// let  r = parseJson("{name:zs}")
// console.log( r);  //Left { _value: { error: 'Unexpected token n in JSON at position 1' } }

let  r = parseJson('{"name":"zs"}').map(x => x.name.toUpperCase())
console.log( r); //Right { _value: 'ZS' }

IO 函子

IO 函子中的 _value 是一个函数，这里是把函数作为值来处理
IO 函子可以把不纯的动作存储到 _value 中，延迟执行这个不纯的操作(惰性执行)，包装当前的操作纯
把不纯的操作交给调用者来处理

// IO函子
const fp = require("lodash/fp")

class IO{
    static of(value){
        return  new IO(function(){
            return value
        })
    }
    constructor(fn){
       this._value = fn
    }
    map(fn){
        return  new IO(fp.flowRight(fn,this._value))
    }
}

// 调用
let r = IO.of(process).map(p => p.execPath)  //{ _value: [Function (anonymous)] }
console.log(r._value());  //D:\node\node.exe

Task 异步执行

异步任务的实现过于复杂，我们使用 folktale 中的 Task 来演示
folktale 一个标准的函数式编程库
和 lodash、ramda 不同的是，他没有提供很多功能函数
只提供了一些函数式处理的操作，例如：compose、curry 等，一些函子 Task、Either、 MayBe 等

const { compose,curry } = require("folktale/core/lambda");
const { toUpper, first } = require("lodash/fp")
// let f = curry(2, (x, y) => x + y)
//  console.log(f(1, 2));
//  console.log(f(1)(2));

let f = compose(toUpper, first)
console.log(f(["one", "two"])); //ONE

Task 异步执行
folktale(2.3.2) 2.x 中的 Task 和 1.0 中的 Task 区别很大，1.0 中的用法更接近我们现在演示的函子
这里以 2.3.2 来演示

// task 处理异步任务

const { task } = require("folktale/concurrency/task")
const fs = require("fs")
const  { split, find } = require("lodash/fp")


function readFile(filename){
    return task(resolver => {
        fs.readFile(filename,"utf-8",(err,data)=>{
            if (err) {
                resolver.reject(err)
            }
            resolver.resolve(data)
        })
    })
}
readFile("package.json").map(split("\n")).map(find(x => x.includes("version")))
.run().listen({
    onRejected:err => {
        console.log(err);
    },
    onResolved:val => {
        console.log(val); //"version": "1.0.0",
    }
})

Pointed 函子

Pointed 函子是实现了 of 静态方法的函子
of 方法是为了避免使用 new 来创建对象，更深层的含义是 of 方法用来把值放到上下文Context（把值放到容器中，使用 map 来处理值）

Monad（单子）

在使用 IO 函子的时候，如果我们写出如下代码：

// IO函子
const fp = require("lodash/fp")
const fs = require("fs")

class IO{
    static of(value){
        return  new IO(function(){
            return value
        })
    }
    constructor(fn){
       this._value = fn
    }
    map(fn){
        return  new IO(fp.flowRight(fn,this._value))
    }
}

let readFile = function(filename){
    return new IO(function(){
       return fs.readFileSync(filename,"utf-8")
    })
}

let print = function (x) { 
    return new IO (
        function(){
            console.log(x);
            return x
        }
    )
 }

 let cat = fp.flowRight(print,readFile)
// IO(IO(x))
let r = cat("package.json")._value()._value()

console.log(r);

Monad 函子是可以变扁的 Pointed 函子，IO(IO(x))
一个函子如果具有 join 和 of 两个方法并遵守一些定律就是一个 Monad

const fp = require("lodash/fp")
const fs = require("fs")

class IO{
    static of(value){
        return  new IO(function(){
            return value
        })
    }
    constructor(fn){
       this._value = fn
    }
    map(fn){
        return  new IO(fp.flowRight(fn,this._value))
    }
    join(){
        return this._value()
    }
    flatMap(fn){
      return this.map(fn).join()
    }
}

let readFile = function(filename){
    return new IO(function(){
       return fs.readFileSync(filename,"utf-8")
    })
}

let print = function (x) { 
    return new IO (
        function(){
            console.log(x);
            return x
        }
    )
 }

//  let cat = fp.flowRight(print,readFile)
// // IO(IO(x))
// let r = cat("package.json")._value()._value()

// console.log(r);

let r = readFile('package.json') .map(fp.toUpper) .flatMap(print) .join()
console.log(r);

函数式编程学习记录，5000字长文，帮你掌握高阶函数，以及各种函子，开启你函数式编程的大门

函数式编程

为什么要学习函数式编程

什么是函数式编程

前置知识

函数是一等公民

高阶函数

什么是高阶函数

使用高阶函数的意义

常用高阶函数

闭包

纯函数

纯函数概念

纯函数的好处

副作用

柯里化

lodash 中的柯里化函数

总结

函数组合

lodash 中的组合函数

Point Free

Functor(函子)

为什么要学函子

什么是 Functor

函子总结

MayBe 函子

Either 函子

IO 函子

Task 异步执行

Pointed 函子

Monad（单子）