一、函数式编程
什么是函数式编程(FP)？
- FP是一种编程范式，也是一种编程风格，和面向对象是并列的关系。
- FP用于描述数据或函数之间的映射；根据输入通过某种运算获得相应的输出，即映射关系，例如：y=sin(x)。
- FP需要有输入和输出，相同的输入有相同的输出（这种称之为纯函数）。所以我们可以利用这个特点重用该函数，达到代码重用的目的。
函数式编程的常见应用场景
- ES6中的map、filter、some等高阶函数。
- React的高阶组件使用了高阶函数来实现，高阶函数就是函数式编程的一个特性。Redux也使用了函数式编程的思想。
- Vue3也开始拥抱函数式编程，Vue2中也有一些高阶函数。
- Webpack打包过程中利用tree shaking过滤无用代码。
- 有很多库可以帮助我们进行函数式开发：lodash、underscore、ramda。
函数式编程的好处
- 综合高阶函数、纯函数、柯理化、函数组合等好处
二、高阶函数
什么是高阶函数？高阶函数有以下几种特性：
- 函数作为变量（函数是一等公民特性）
- 函数作为参数，例如：map、filter、some等（高阶函数特性）
- 函数作为返回值，例如：闭包、节流、防抖函数等 （高阶函数特性）
使用高阶函数的好处？
- 高阶函数可以帮助我们重用、抽象一些过程代码，让代码复用率更高
常用的高阶函数？
- forEach
- map
- filter
- every
- some
- find/findIndex
- reduce
- sort
例如：map、some、函数节流与防抖等
const map = (array, fn) => {
let results = []
for (const value of array) {
results.push(fn(value))
}
return results
}
// test
let arr = [1, 2, 3, 4]
arr = map(arr, v => v * v)
console.log(arr)// some 判断数组中是否有一个元素满足我们指定的条件，满足是true，都不满足为false
const some = (array, fn) => {
let result = false
for (const value of array) {
result = fn(value)
// 如果有一个元素不满足就直接跳出循环
if (result) {
break
}
}
return result
}
// test
let arr = [1, 3, 4, 9]
let arr1 = [1, 3, 5, 9]
let r = some(arr, v => v % 2 === 0)
console.log(r) // true
r = some(arr1, v => v % 2 === 0)
console.log(r) // false// once
// 函数节流，让函数只执行一次
function once(fn) {
let done = false
return function() {
// 判断值有没有被执行，如果是false表示没有执行，如果是true表示已经执行过了，不必再执行
if(!done) {
done = true
// 调用fn，当前this直接传递过来，第二个参数是把fn的参数传递给return的函数
return fn.apply(this, arguments)
}
}
}
// test
let pay = once(function (money) {
console.log(`支付：${money} RMB`)
})
pay(5) //支付：5 RMB
pay(5)
pay(5)
pay(5)
pay(5)三、纯函数
什么是纯函数？
- 相同的输入有相同的输出而且没有副作用，常见的纯函数slice
- 纯函数必须要有输入输出
let numbers = [1, 2, 3, 4, 5]
// 纯函数
// 对于相同的函数，输出是一样的
// slice方法，截取的时候返回截取的函数，不影响原数组
numbers.slice(0, 3) // => [1, 2, 3]
numbers.slice(0, 3) // => [1, 2, 3]
numbers.slice(0, 3) // => [1, 2, 3]
// 不纯的函数
// 对于相同的输入，输出是不一样的
// splice方法，返回原数组，改变原数组
numbers.splice(0, 3) // => [1, 2, 3]
numbers.splice(0, 3) // => [4, 5]
numbers.splice(0, 3) // => []纯函数有什么好处：
- 可缓存（根据相同的传入参数，例如Loadash中的memoize()方法）
- 可测试
- 并行处理
多线程环境下并行操作共享的内存数据很可能会出现意外情况。纯函数不需要访问共享的内存数据，所以在并行环境下可以任意运行纯函数。（虽然JS是单线程，但是ES6以后有一个Web Worker，可以开启一个新线程）
怎么理解函数的副作用？
如果一个函数依赖于外部的状态就无法保证相同的输出，就会带来副作用，如下面的例子：
// 不纯的函数，因为它依赖于外部的变量
let mini = 18
function checkAge (age) {
return age >= mini
}副作用来源有哪些？
- 配置文件
- 数据库
- 获取用户的输入
- ......
四、函数的柯理化
什么是函数的柯理化？
- 柯里化（Currying）是把多个参数的函数变换成单一参数的函数
- 柯理化可以对函数参数进行缓存
//柯理化示例
const _ = require('lodash')
function getSum (a, b, c) {
return a + b + c
}
const curried = _.curry(getSum)
console.log(curried(1, 2, 3)) // 6
console.log(curried(1)(2, 3)) // 6
console.log(curried(1, 2)(3)) // 6柯理化的模拟实现
// 写法一：
function curry(fn) {
function _c(restNum, argsList) {
return restNum === 0 ?
// fn.apply(null, argsList)
fn.apply(null, argsList) :
function(x) {
return _c(restNum - 1, argsList.concat(x));
};
}
return _c(fn.length, []);
}
// 使用
var plus = curry(function(a, b) {
return a + b;
});
// 3
console.log(plus(1)(2));- 入参出参：调用传递一个纯函数的参数，完成之后返回一个柯里化函数
- 入参情况分析：
如果curried调用传递的参数和getSum函数参数个数相同，那么立即执行并返回调用结果
如果curried调用传递的参数是getSum函数的部分参数，那么需要返回一个新的函数，并且等待接收getSum的其他参数 - 重点关注：
获取调用的参数
判断个数是否相同
// 写法二：模拟柯里化函数
function curry (func) {
// 取名字是为了下面实参小于形参的时候用的
return function curriedFn(...args) {
// 判断实参和形参的个数
if(args.length < func.length) {
return function() {
// 等待传递的剩余参数，如果剩余函数的参数加上之前的参数等于形参，那么就返回func
// 第一部分参数在args里面，第二部分参数在arguments里面，要将两个合并并且展开传递（使用...）
// concat函数要合并两个数组，arguments为伪数组，所以用Array.from进行转换
return curriedFn(...args.concat(Array.from(arguments)))
}
}
// 如果实参大于等于形参的个数
// args是剩余参数，是个数组形式，而返回的时候要展开（使用...）
return func(...args)
}
}
// test
const curriedTest = curry(getSum)
console.log(curriedTest(1, 2, 3)) // 6
console.log(curriedTest(1)(2, 3)) // 6
console.log(curriedTest(1, 2)(3)) // 6五、函数的合成
什么是函数的合成？
如果一个值要经过多个函数，才能变成另外一个值，就可以把所有中间步骤合并成一个函数，这叫做"函数的合成"（compose）。
为什么要合成函数？
纯函数和柯里化很容易写出洋葱代码 h(g(f(x)))，函数的合成可以简化一系列操作
函数的合成默认是从右到左执行
// 函数组合演示
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函数的合成实现原理
//入参不固定，参数都是函数，出参是一个函数，这个函数要有一个初始的参数值
function compose (...args) {
// 返回的函数，有一个传入的初始参数即value
return function (value) {
// ...args是执行的函数的数组，从右向左执行那么数组要进行reverse翻转
// reduce: 对数组中的每一个元素，去执行我们提供的一个函数，并将其汇总成一个单个结果
// reduce的第一个参数是一个回调函数，第二个参数是acc的初始值，这里acc的初始值就是value
// reduce第一个参数的回调函数需要两个参数，第一个参数是汇总的一个结果，第二个参数是如果处理汇总的结果的函数并返回一个新的值
// fn指的是数组中的每一个元素（即函数），来处理参数acc，完成之后下一个数组元素处理的是上一个数组的结果acc
return args.reverse().reduce(function (acc, fn) {
return fn(acc)
}, value)
}
}
//test
const fTest = compose(toUpper, first, reverse)
console.log(fTest(['one', 'two', 'three'])) // THREE
// ES6的写法（函数都变成箭头函数）
const compose = (...args) => value => args.reverse().reduce((acc, fn) => fn(acc), value)
六、常用的函数式编程库Loadash，柯理化/函数合成更简单（重要）
学习了函数式编程的概念，最重要的是我们要会使用Loadash库进行一些简单的应用。
参考资料：Loadash官网
Loadash的安装
> npm i --save lodashLoadash常用的方法
- curry()，创建一个函数，该函数接收一个或多个 func的参数，如果 func 所需要的参数都被提供则执行 func 并返回执行的结果。否则继续返回该函数并等待接收剩余的参数。
- flow() 组合多个函数，是从左到右运行
- flowRight() 组合多个函数。是从右到左运行，使用的更多一些 （注意：执行完的前一个函数结果需要是后一个函数的入参，数据类型也要主要匹配；）
- memoize() 可以缓存函数执行，相同的参数使用缓存
// Loadash中柯理化curry()示例
const _ = require('lodash')
// 参数是一个的为一元函数，两个的是二元函数
// 柯里化可以把一个多元函数转化成一元函数
function getSum (a, b, c) {
return a + b + c
}
// 定义一个柯里化函数
const curried = _.curry(getSum)
// 如果输入了全部的参数，则立即返回结果
console.log(curried(1, 2, 3)) // 6
//如果传入了部分的参数，此时它会返回当前函数，并且等待接收getSum中的剩余参数
console.log(curried(1)(2, 3)) // 6
console.log(curried(1, 2)(3)) // 6// Loadash中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'])) // THREE// Loadash中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))
// 4
// 50.26548245743669
// 50.26548245743669
// 50.26548245743669
// 看到输出的4只执行了一次，因为其结果被缓存下来了// 自定义实现memoize()缓存函数
function memoize (f) {
let cache = {}
return function () {
// arguments是一个伪数组，所以要进行字符串的转化
let key = JSON.stringify(arguments)
// 如果缓存中有值就把值赋值，没有值就调用f函数并且把参数传递给它
cache[key] = cache[key] || f.apply(f,arguments)
return cache[key]
}
}
let getAreaWithMemory1 = memoize(getArea)
console.log(getAreaWithMemory1(4))
console.log(getAreaWithMemory1(4))
console.log(getAreaWithMemory1(4))
// 4
// 50.26548245743669
// 50.26548245743669
// 50.26548245743669七、Loadash其它常用方法：
参考：https://www.lodashjs.com/docs/lodash.join
// 转换成小写：
_.toLower("NERVER"])
// "nerver"
// 分割字符串，最多展示limit个
_.split("nerver-say-die", "-", [limit])
// ["nerver","say","die"]
// 组合数组为字符串
_.join(["nerver","say","die"], "-")
// "nerver-say-die"
// 类似于ES6的map，参数位置不同
_.map(array, item=>console.log(item)) 八、关于flowRight的使用和调试（函数组合）
// NEVER SAY DIE --> nerver-say-die
const _ = require('lodash')
const split = _.curry((sep, str) => _.split(str, sep))
const join = _.curry((sep, array) => _.join(array, sep))
// 我们需要对中间值进行打印，并且知道其位置，用柯里化输出一下
const log = _.curry((tag, v) => {
console.log(tag, v)
return v
})
// 从右往左在每个函数后面加一个log，并且传入tag的值，就可以知道每次结果输出的是什么
const f = _.flowRight(join('-'), log('after toLower:'), _.toLower, log('after split:'), split(' '))
// 从右到左
//第一个log：after split: [ 'NEVER', 'SAY', 'DIE' ] 正确
//第二个log: after toLower: never,say,die 转化成小写字母的时候，同时转成了字符串，这里出了问题
console.log(f('NEVER SAY DIE')) //n-e-v-e-r-,-s-a-y-,-d-i-e
// 修改方式，利用数组的map方法，遍历数组的每个元素让其变成小写
// 这里的map需要两个参数，第一个是数组，第二个是回调函数，需要柯里化
const map = _.curry((fn, array) => _.map(array, fn))
// split(' ')(str)，入参为一个string，返回一个array
// map(_.toLower)(array)，入参为array，返回一个array
// join('-')，入参为array，返回一个string
const f1 = _.flowRight(join('-'), map(_.toLower), split(' '))
console.log(f1('NEVER SAY DIE')) // never-say-die九、Loadsh中的FP模块
1、FP模块中的函数调整了参数位置，遵循数据之后、函数优先的特点；即参数中通常将函数放到前面。
2、FP模块中的函数都被柯理化了，方便函数组合
// lodash 模块
const _ = require('lodash')
// 数据置先，函数置后
_.map(['a', 'b', 'c'], _.toUpper)
// => ['A', 'B', 'C']
_.map(['a', 'b', 'c'])
// => ['a', 'b', 'c']
// 数据置先，规则置后
_.split('Hello World', ' ')
//BUT
// 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(fp.toLower), fp.split(' '))
console.log(f('NEVER SAY DIE')) // never-say-die
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。