函数式编程范式

一、函数式编程

1.函数式编程意义：

• 函数式编程是随着 React 的流行受到越来越多的关注
• vue 3.X 拥抱函数式编程
• 函数式编程可以抛弃 this
• 打包时更好的 tree Shaking 过滤无用代码
• 很多开源代码库协助函数是开发：loadsh、underScore、ramda

2.函数式编程的定义

编程中有很多编程方式：

面向过程：根据过程一步一步实现功能；

面向对象：面向对象将现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承、多态来演示事物事件的联系；

函数式编程：Function Programming 简称 FP，并不是指程序中的函数 ，是指数学里面的函数即映射关系，比如下例中 x 与 y 的关系，是把现实世界事物之间的联系抽象到程序世界中；

比如 ：X 通过某种运算 F (联系、映射) 得到 Y，即 Y = F(X) ，F(X) 则是用来表示 X 和 Y 两者间的映射关系；

X => F => Y

且相同的输入要得到相同的输出（纯函数）；则函数式编程是用来描述数据（函数）之间的映射，是对运算过程的抽象；

例如：

// 求 a 加 b 的和
// 非函数式编程
let a = 10;
let b = 24;
let sum = a + b;
// 函数编程
function add(a, b) {return a + b;
}
let sum = add(10, 24);

优势：可无数次重用，细粒度函数

3.函数是一等公民 (First-class Function)

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

数组中，它还可以作为另一个函数的参数和返回值，甚至我们可以在程序运行的时候通过 new Function(‘alert(1)’) 来构造一个新的函数

• 函数可以存储在变量中

• 函数作为参数

• 函数作为返回值

4.高阶函数 (Higher-Order Function)

• 可以把函数作为参数传递给另一个函数

// 模拟实现 forEach
// 功能：遍历数组每一个元素并做相应处理
function foreach (array, fn) {for(let i = 0;i < array.length;i++){fn(array[i])}
}let arr = [2, 4, 6, 8]
foreach(arr, item => {console.log(item);
});
// 模拟实现 filter
// 功能：过滤数组中满足条件的元素function filter(arr, fn) {let reasult = [];for(let item of arr){fn(item) && reasult.push(item)}return reasult;
}
let newArr = filter(arr, item => item > 5)
// 优势：功能灵活，可重复调用；

• 可以把函数作为另一个函数的返回结果

//例1：
function makeFn() {let msg = "hello";return () => console.log(msg);
}
const fn = makeFn();
fn();
// 或者
makeFn()()
//例2：
// once 函数，只执行一次，例如支付时，一个订单只能支付一次
function once(fn) {let done = false;return function () {if(!done){done = true;return fn.apply(this, arguments);}}
}
let pay = once(money => {console.log(money);
})
pay(10)

• 高阶函数的意义
  • 将每一个过程抽象，可以屏蔽细节，只需要关注要实现的目标，高阶函数用来抽象通用的问题
  • 函数更灵活
• 常用的高阶函数：map forEach filter every some find/findIndex reduce sort …

// 模拟高阶函数
// map 对数组遍历，处理后返回新数组（对每一项处理并返回）
let arr = [2, 4, 6, 8, 10];
const map = (arr, fn) => {let result = [];for(let item of arr) {result.push(fn(item));}return result;
}
let newArr = map(arr, item => item * 2)// every 遍历数组，判断元素是否满足条件，都满足条件返回 true
const every = (arr, fn) => {let result = true;for(let item of arr) {result = fn(item);if(!result){break;}}return result;
}
let everyBool = every(arr, item => item > 2)// some 遍历数组，判断元素是否满足条件，都满足条件返回 true
const some = (arr, fn) => {let result = false;for(let item of arr) {result = fn(item);if(result){break;}}return result;
}
let someBool = some(arr, item => item > 2)

5.闭包

• 闭包 (Closure)：函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包。
• 可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员
• 优势：延长外部函数内部变量的作用域范围，该变量不会被释放
• 本质：函数运行完毕会一出执行栈，而闭包内的变量由于被引用，不会移除

// 闭包案例
// 计算不同数值下相同次方的函数
function makePower(power) {return (number) => {return Math.pow(number, power)}
}
let power2 = makePower(2);
power2(3);
power2(5);// 计算相同等级员工的绩效工资
function makeSalary(salary) {return extra => {return salary + extra}
}
let salaryOne = makeSalary(20000);
salaryOne(5000);
salaryOne(3000);//附： 这样在计算时，想要计算不同数值的次方只需要调用 power2 ，想要计算第一等级为20000基础薪资员工的工资只需要调用 salaryOne 即可，此处并不一定是最优解，只是为了说明编程思想代替复杂逻辑。

二、纯函数

1.概念

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

• 数组的 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) 
// => []

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

2.lodash

• Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
• 内部提供了很多可以供我们使用的封装后的函数方法
• 例如：first / last / toUpper / reverse / each / includes / find / findIndex

//使用
npm init -y => 初始化包
npm i lodash => 安装 lodash 包
const _ = require('lodash')	=> 包含不纯函数，如 reverse
const fp = require('lodash/fp') => 纯函数封装库
const array = [1,2,3,4,5,6]
_.first(array) => 1
//注：此处其余方法简单不做演示，下面用到会说明，具体可到 lodash 官网查看

lodash 库参考链接：https://www.lodashjs.com/

3.纯函数的好处

• 可缓存
  • 因为纯函数对相同的输入始终有相同的结果，所以可以把纯函数的结果缓存起来
  • memoize 会将结果缓存，多次调用时，只执行一次，其余从缓存获取
  • 当耗时函数被多次调用，可使用 memoize 函数提高性能

// 记忆函数
const _ = require('lodash')function getArea (r) {console.log(r) => 只被打印一次return Math.PI * r * r
}let getAreaWithMemory = _.memoize(getArea)
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))
console.log(getAreaWithMemory(4))// 模拟 memoize 方法的实现
function memoize (f) {let cache = {}return function () {let key = JSON.stringify(arguments)cache[key] = cache[key] || f.apply(f, arguments)return cache[key]}
}let getAreaWithMemory = memoize(getArea)

• 可测试：纯函数让测试更方便
• 并行处理（了解即可）
  • 在多线程环境下并行操作共享的内存数据很可能会出现意外情况
  • 纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数 (Web Worker)

4.副作用

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

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

副作用来源：

• 配置文件

• 数据库

• 获取用户的输入

• ……

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

三、柯里化**(Haskell Brooks Curry)**

1.概念

• 使用柯里化解决上一个案例中硬编码的问题，使用闭包及高阶函数，既是纯函数，也无硬编码

// 函数的柯里化
function checkAge (min) {return function (age) {return age >= min}
}// ES6
let checkAge = min => (age => age >= min)let checkAge18 = checkAge(18)
let checkAge20 = checkAge(20)console.log(checkAge18(20))
console.log(checkAge18(24))

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

2.lodash 中的柯里化

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

// lodash 中的 curry 基本使用 
const _ = require('lodash')function getSum (a, b, c) {return a + b + c
}const curried = _.curry(getSum)console.log(curried(1, 2, 3))
console.log(curried(1)(2, 3))
console.log(curried(1, 2)(3))

• 案例

// 柯里化案例
// ''.match(/\s+/g) 匹配字符串中的空格
// ''.match(/\d+/g) 匹配字符串中的数字
const _ = require('lodash')
//例1：获取字符串中的空格/数字
const match = _.curry(function (reg, str) {return str.match(reg)
})
// 
const haveSpace = match(/\s+/g)
const haveNumber = match(/\d+/g)
console.log(haveSpace('hell oworld')) 
console.log(haveNumber('abc123'))
// 匹配字符串的空格/ 数字 有则返回 [' ']/ ['123'] ; 无返回 null //例2：获取数组指定条件元素组成新数组，可无限复用
const filter = _.curry(function (func, array) {return array.filter(func)
})const findSpace = filter(haveSpace)console.log(filter(haveSpace, ['John Connor', 'John_Donne']))
console.log(findSpace(['John Connor', 'John_Donne']))

• 模拟 _.curry() 的实现
  • 1.看 lodash 如何调用，调用形式写函数调用；参数是一个函数，返回一个函数的调用结果或者等待调用
  • 2.分许返回函数调用，分实参与形参情况

// 模拟实现 lodash 中的 curry 方法function getSum (a, b, c) {return a + b + c
}const curried = curry(getSum)console.log(curried(1, 2, 3))
console.log(curried(1)(2, 3))
console.log(curried(1, 2)(3))function curry (func) {return function curriedFn(...args) {// 判断实参和形参的个数if (args.length < func.length) {return function () {return curriedFn(...args.concat(Array.from(arguments)))}}return func(...args)}
}
// 注：Array.from(arguments) => 将伪数组变为数组

3.总结

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

四、函数组合

1.概念

• 纯函数和柯里化很容易写出洋葱代码 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]))

2.lodash 中的组合函数

• lodash 中组合函数 flow() 或者 flowRight()，他们都可以组合多个函数

• flow() 是从左到右运行

• flowRight() 是从右到左运行，使用的更多一些

// lodash 中的函数组合的方法 _.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']))

五、Point Free

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

• 不需要指明处理的数据
• 只需要合成运算过程
• 需要定义一些辅助的基本运算函数

// point free
// Hello     World => hello_world
const fp = require('lodash/fp')
const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower)
console.log(f('Hello     World'))// 把一个字符串中的首字母提取并转换成大写, 使用. 作为分隔符
// world wild web ==> W. W. W
const fp = require('lodash/fp')// const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.first), fp.map(fp.toUpper), fp.split(' '))
const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.flowRight(fp.first, fp.toUpper)), fp.split(' '))console.log(firstLetterToUpper('world wild web'))

六、Functor(函子**)**

1.什么是 Functor

• 到目前为止已经已经学习了函数式编程的一些基础，但是我们还没有演示在函数式编程中如何把副作用控制在可控的范围内、异常处理、异步操作等。
• 容器：包含值和值的变形关系(这个变形关系就是函数)
• 函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运行一个函数对值进行处理(变形关系)

// Functor 函子
class Container {constructor (value) {this._value = value}map (fn) {return new Container(fn(this._value))}
}let r = new Container(5).map(x => x + 1).map(x => x * x)console.log(r)

2.总结

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

Tip：

1.如果函数多参数且不确定个数，使用 arguments 伪数组

2.fn.apply() 的第二个参数可展开数组也可展开 arguments

Q：

1.箭头函数无this，有 arguments 吗？

2.伪数组与数组有什么区别？

ss Container {
constructor (value) {
this._value = value
}

map (fn) {
return new Container(fn(this._value))
}
}

let r = new Container(5)
.map(x => x + 1)
.map(x => x * x)

console.log®

### 2.总结- 函数式编程的运算不直接操作值，而是由函子完成
- 函子就是一个实现了 map 契约的对象
- 我们可以把函子想象成一个盒子，这个盒子里封装了一个值
- 想要处理盒子中的值，我们需要给盒子的 map 方法传递一个处理值的函数（纯函数），由这个函数来对值进行处理
- 最终 map 方法返回一个包含新值的盒子（函子）## Tip：1.如果函数多参数且不确定个数，使用 arguments 伪数组2.fn.apply() 的第二个参数可展开数组也可展开 arguments## Q：1.箭头函数无this，有 arguments 吗？2.伪数组与数组有什么区别？