函数式编程
前言
在讲函数式组件之前，笔者有必要声明一下，笔者对函数式编程知之甚少，此篇文章全是因为函数式编程在当今前端开发较为流行，所以才要去学习Orz。像 ES6 中的箭头函数，Redux 中的 compose，React 16.6之后的 React.memo()，16.8 之后的 Hooks，使用函数式组件成为主流（自然，Vue3 中也有 composition API等）
因为我们使用的各种框架，越来越偏向于函数式开发，所以为了看懂、使用这些代码，我们有必要学习函数式编程
什么是函数式编程
写代码时，不同的写法造成不同的门派，主流的编程范式有两种，即命令式编程（Imperative programming）和声明式编程（Declarative programming）
当然还有像事件驱动编程等，此处不讲
在命令式编程语言中一般支持四种基本语句：
- 运算语句
- 循环语句（for、while）
- 条件分支语句（if else、switch）
- 无条件分支语句（return、break、continue）
它关注的过程，所以也被称为过程化编程，与之对应的是声明式编程
- 命令式编程告诉计算机如何计算、关心解决问题的步骤
- 声明式编程告诉计算机需要计算什么，关心解决问题的目标
两种编程方式在 JavaScript 均有开花，在以往的开发中（即React、Vue等未出现前），我们习惯使用命令式编程，其中的代表就是面向对象编程，即通过对象、类、继承、封装等特性实现面向对象编程，流行的库是 jquery
即使当初不那么流行，但 JavaScript 是一直支持声明式编程的，即通过函数式编程来实现，其原因是函数是一等公民，它能作为参数和返回值。流行的库是 underscorejs、lodash
函数式编程有哪些特点
柯里化（Currying）、缓存函数、纯函数、函数组合（compose）、不可变数据、高阶函数
我们依次讲讲这几个特点
柯里化
什么是柯里化
柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术
——wiki
也就是说，柯里化是一种函数的转换，它是将一个函数从f(a, b, c) 的写法转换为f(a)(b)(c)
通俗来讲：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。它不会调用函数，只是对函数进行转换
javascript
// 柯里化之前
function add(x, y) {
return x + y;
}
add(1, 2); // 3
// 柯里化之后
function add(y) {
return function (x) {
return x + y;
};
}
// ES6 箭头函数表示
const add = x => y => x + y;
add(2)(1);如上案例，我们就是将add(1, 2) 转换为了 add(2)(1)，当然，此案例是模拟柯里化，一般来说，我们会写个「转换函数」将函数适配成柯里化型函数
javascript
const curryAdd = curry(add)
console.log(curryAdd(1)(2)) // 3那么如何实现 curry 呢？需要满足两点
- 判断当前函数传入的参数是否大于或等于
fn需要参数的数量，如果是，直接执行fn - 如果传入参数数量不够，返回一个闭包，暂存传入的参数，并重新返回
curry函数
javascript
const curry = (fn, ...args) => {
if (args.length >= fn.length) {
return fn(...args)
} else {
return (...args2) => curry(fn, ...args, ...args2)
}
}我们来一个简单的实例验证一下：
javascript
function fun(a, b, c) {
return a + b + c;
}
const curryFun = curry(fun);
curryingFun(1)(2)(3); // 6
curryingFun(1, 2)(4); // 7
curryingFun(1, 2, 5); // 8翻看函数式编程概念的两个库：undersore.js 及 lodash 中各自实现的 curry
箭头函数的使用
在上面的例子中，我们频繁使用箭头函数，箭头函数的魅力之一是它符合函数式编程的思维，例如：
javascript
function add(y) {
return function (x) {
return x + y;
};
}
const add = x => y => x + y;javascript
// redux 中的 compose 函数
const compose = (...func) => {
if (func.length === 0) {
return args => args
}
if (func.length === 1) {
return func[0]
}
return func.reduce((a,b) => (...args) => a(b(...args)))
}javascript
function enhancer(originF) {
return function (...args) {
console.log('before');
const result = originF(...args);
console.log('after');
return result;
};
}
// 等于
const enhancer =
(originF) =>
(...args) => {
console.log('before');
const result = originF(...args);
console.log('after');
return result;
};javascript
// 三数之乘
const multi = a => b => c => a * b * c笔者认为，柯里化就是利用了闭包的特性，将参数存着，到了要使用的时候再释放，而这正式柯里化的应用之一
柯里化的应用
在开发中，我们会遇到这种情况，开发了一个工具函数，在调用时，会使用一个频繁的参数，而如果将这个参数提取出来，就能优化代码，如
javascript
function add(a, b) {
return a + b
}
add(10, 1) // 11
add(10, 11) // 21
add(10, 111) // 121如果我们柯里化，将第一个参数 10 内置进函数中，代码就能清晰明了
javascript
// 最简单的优化
functon add10(b) {
return add(10, b)
}
add10(1) // 11
add10(11) // 21
add10(111) // 121函数 add10 就是经过了柯里化的函数，就像我们上文所讲，一般用个包装函数将其适配成柯里化型函数，这里我们调用上文的 curry 函数
javascript
// 完整版
function add(a, b) {
return a + b;
}
// 柯里化包装函数
const curry = (fn, ...args) => {
if (args.length >= fn.length) {
return fn(...args)
} else {
return (...args2) => curry(fn, ...args, ...args2)
}
}
const add10 = curry(add, 10)
add10(1) // 11
add10(11) // 21
add10(111) // 121缓存函数
缓存函数就是将函数返回值缓存起来的方法。与柯里化相比，它似乎更简单。例如
javascript
function add(a, b) {
return a + b;
}
let memoAdd = memoize(add)
memoAdd(1, 2) // 3
memoAdd(1, 3) // 相同的参数，第二次调用时，从缓存中取出数据如何实现呢？
其实很简单，就是用闭包存在内存中。如果一致，就返回，不一致就存在对象中，再返回
javascript
const memoize = (func) => {
let cache = {}
return function(key) {
if (!cache[key]) {
cache[key] = func.apply(this, arguments)
}
return cache[key]
}
}纯函数
笔者认为纯函数就类似数学中的函数，例如 y = f(x)，更具体点就是：y=2x，相同的输入，就有相同的输出，在执行过程中不会产生副作用
所有它有两个特点：
- 不改变原数据（没有副作用）
- 返回一个新数据
javascript
const arr = [1, 2, 3]
// 纯函数
arr.slice(1)
console.log(arr) // [1, 2, 3]
// 产生副作用，非纯函数
arr.splice(1)
console.log(arr) // [1]JavaScript 中的哪些 API 是纯函数
数组： slice、concat、map、reduce、filter
slice、concat 我们在 拷贝的秘密 曾经讲过，是浅拷贝的方法
map、filter 是ES6 新增的 API
字符串：String 类型及其他的基本类型的 API 都是不可变的，它们的每个 API 都是纯函数，不会改变原数据
javascript
var str = "hello"
console.log(str.slice(0, 3)) // hel , slice 在 String 类型中同样适用，
console.log(str) // hello
console.log(str.substr(0, 3)) // hel
console.log(str) // hello
console.log(str.substring(0,3)); // hel
console.log(str) // hello
// 其他的 API 也是如此函数组合（compose）
就是将多个函数依次执行，将这些函数组合起来，自动依次执行，这一过程就是函数组合
这么做的目的是为了让代码更加简单且具有可读性
javascript
function double(num) {
return num * 2
}
function square(num) {
return num ** 2
}
// 普通做法
const res = square(double(10))
console.log(res) // 400
// 函数组合
function composeFn(fn1, fn2) {
return function (count) {
return fn2(fn1(count))
}
}
const newFn = composeFn(double, square)
const res2 = newFn(20) // 1600看看 underscore 的 compose 函数
javascript
function compose() {
var args = arguments;
var start = args.length - 1;
return function() {
var i = start;
var result = args[start].apply(this, arguments);
while(i--) result = args[i].call(this, result);
return result;
}
}看到 compose 是否很熟悉，redux 中的源码是这样写的
javascript
function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if(funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a,b) => (...args) => a(b(...args)))
}如果在实际开发中，就可以用这一概念解决洋葱代码
javascript
fn3(fn2(fn1(fn0(x)))) // 洋葱代码
var result = compose(f3, f2, f1, f0) // 函数组合代码
result(x)高阶函数
简单来说，高阶函数就是一个返回另一个函数的函数
javascript
function sayHello() {
return function() {
console.log("hello")
}
}其本质是因为函数是一等公民，满足作为参数或者返回值
其 React 中也有高阶组件的概念，其原理都一样，即将组件当作参数传入，返回另一个组件
不可变数据
不可变数据结构式函数式编程中的基本准则
JavaScript 的对象是可变的，原因是为了节约内存，但也同样带来了副作用，当应用程序复杂后，维护代码难度会加深
我们在 拷贝的秘密 中曾经讲过，基本类型的数据是不可变的，因为它们存在栈内存，而引用类型（即对象）的数据是可变的，它存在堆内存，当赋值时，拷贝的时它的引用地址
所以我们在赋值时会根据情况使用浅拷贝、深拷贝来实现
在 React 开发时，我们会用 immutable.js 、immer 对数据进行不可变
总结
我们不管其他的，单单就函数式编程在前端方面有哪些用途？如在 Koa 中的洋葱模型、redux 中的 compose 函数就是函数组合，React 开发时的 HOC 高阶组件就采用了高阶函数，以及它（React）为了让数据保持唯一性，而可以引用 不可变数据库（ immutable.js、immer ）是函数式编程的特性——不可变数据
当然，这些只是笔者对函数式编程浅薄的认知，其内容当然不知以上说的几点，还有惰性函数、函子等知识点，以及其他语言中的函数式编程，待笔者等级提升后再来战