从Immutable.js到Redux函数式编程
基本概念
函数式编程（英语：functional programming）或称函数程序设计、泛函编程，是一种编程范式。它将电脑运算视为函数运算，并且避免使用程序状态以及易变对象。其中，λ 演算为该语言最重要的基础。而且，λ 演算的函数可以接受函数作为输入参数和输出返回值。
以上是维基百科对于函数式编程的定义，用简单的话总结就是“强调以函数使用为主的软件开发风格”。
在抽象的定义之外，从实际出发，JS 的函数式编程有以下几个特点：
- 函数是一等公民
- 拥抱纯函数，拒绝副作用
- 使用不可变值
函数式编程要素
函数是一等公民
我们经常听到这句话，”在 JS 中函数是一等公民“，其具体的含义是，函数具有以下特征：
- 可以被当作参数传递给其他函数
- 可以作为另一个函数的返回值
- 可以被赋值给一个变量
函数式一等公民的特点是所有函数式编程语言所必须具有的，另一个必备特点则是支持闭包（上面的第二点其实很多时候都利用了闭包）
纯函数
有且仅有显示数据流：
- 输入：参数
- 输出：返回值
一个函数要是纯函数，要符合以下几点：
函数内部不能有副作用
对于同样的输入（参数），必定得到同样的输出。
这意味着纯函数不能依赖外部作用域的变量
副作用
参考纯函数“仅有显示数据流”的定义，副作用的定义即拥有“隐式数据流”。或者说：
- 会对函数作用域之外的执行上下文、宿主环境产生影响，如修改全局变量
- 依赖了隐式输入，如使用全局变量
- 进行了与外界的隐式数据交换，如网络请求
不可变值
当函数参数为引用类型时，对参数的改变将作用将映射到其本身。
const arr = [1, 2, 3];
const reverse = (arr) => {
arr.reverse();
};
reverse(arr);
console.log(arr); // [3,2,1]
这种操作符合“副作用”的定义：修改了外部变量。破坏了纯函数的显示数据流。
如果真的需要设计对数据的修改，则应该:
- 拷贝原始数据
- 修改拷贝结果，返回新的数据
const reverse = (arr) => {
const temp = JSON.parse(JSON.stringify(arr));
return temp.reverse();
};
arr = reverse(arr);
拷贝带来的问题
通过拷贝实现对外部数据的只读直观且简单，代价则是性能。
对于一个大对象，每次的修改可能只是其中的一个属性，那么每次的拷贝会带来大量的冗余操作。当数据规模大，操作频率高时，会带来严重的性能问题。
解决拷贝的性能问题： 持久化数据结构
拷贝模式的问题根源在于：一个大对象只有一小部分有改变，却要对整个对象做拷贝。
这个情况其实和另一个场景很相似，就是 Git。一个项目有很多文件，但我一次可能只修改了其中一个。那么我本次的提交记录是怎样的呢？其处理逻辑就是：将改变部分和不变部分进行分离。
**Git 快照保存文件索引，而不会保存文件本身。变化的文件将拥有新的存储空间+新的索引，不变的文件将永远呆在原地。**而在持久化数据结构中，则是变化的属性的索引，和不变的属性的索引
持久化数据结构最常用的库是 Immutable.js，其详解见下文。
JS 中三种编程范式
JS 是一种多范式语言，而从前端的发展历史来看，各时段的主流框架，也正对应了三种编程范式：
- JQuery：命令式编程
- React 类组件：面向对象
- React Hooks、 Vue3：函数式编程
函数式编程的优缺点
优点
- 利于更好的代码组织。因为纯函数不依赖于上下文所以天然具有高内聚低耦合的特点
- 利于逻辑复用。纯函数的执行是与上下文无关的，因此可以更好的在不同场景中复用
- 便于单元测试。纯函数对于相同输入一定得到相同输出的特点，便于自动化测试
缺点
- 相比于命令式编程，往往会包装更多的方法，产生更多的上下文切换带来的开销。
- 更多的使用递归，导致更高的内存开销。
- 为了实现不可变数据，会产生更多的对象，对垃圾回收的压力更大。
偏函数
偏函数的定义简单来说就是，将函数转换为参数更少的函数，也就是为其预设参数。
从 fn(arg1, arg2) 到 fn(arg1)
柯里化（curry）函数
柯里化函数在偏函数的基础上，不仅减少了函数入参个数，还改变了函数执行次数。其含义就是将一个接收 N 个入参的函数，改写为接受一个入参，并返回接受剩余 N-1 个参数的函数。也就是：
fn(1,2,3) => fn(1)(2)(3)
实现一个柯里化函数也是面试高频内容，其实如果规定了函数入参个数，那么是很容易实现的。例如对于入参个数为 3 的函数，实现如下
const curry = (fn) => (arg1) => (arg2) => (arg3) => fn(arg1, arg2, arg3); const fn = (a, b, c) => console.log(a, b, c); curry(fn)(1)(2)(3); // 1 2 3
那么实现通用的 curry 函数的关键就在于：
- 自动判断函数入参
- 自我递归调用
const curry = (fn) => {
const argLen = fn.length; // 原函数的入参个数
const recursion = (args) =>
args.length >= argLen
? fn(...args)
: (newArg) => recursion([...args, newArg]);
return recursion([]);
};
compose & pipe
compose 和 pipe 同样是很常见的工具，一些开源库中也都有自己针对特定场景的实现（如 Redux、koa-compose）。而要实现一个通用的 compose 函数其实很简单，借助数组的 reduce 方法就好
const compose = (funcs) => {
if (funcs.length === 0) {
return (arg) => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
funcs.reduce(
(pre, cur) =>
(...args) =>
pre(cur(...args))
);
};
const fn1 = (x) => x * 2;
const fn2 = (x) => x + 2;
const fn3 = (x) => x * 3;
const compute = compose([fn1, fn2, fn3]);
// compute = (...args) => fn1(fn2(fn3(...args)))
console.log(compute(1)); // 10
而 pipe 函数与 compose 的区别则是其执行顺序相反，正如其字面含义，就像 Linux 中的管道操作符，前一个函数的结果流向下一个函数的入参，所以把 reduce 方法改为 reduceRight 即可：
const pipe = (funcs) => {
if (funcs.length === 0) {
return (arg) => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
funcs.reduceRight(
(pre, cur) =>
(...args) =>
pre(cur(...args))
);
};
const compute = pipe([fn1, fn2, fn3]);
// compute = (...args) => fn3(fn2(fn1(...args)))
console.log(compute(1)); // 12
函数式在常见库中的应用
React
在最新的 React 文档中，函数式组件 + hook 写法已经成为官方的首推风格。而这正是基于函数式编程的理念。React 的核心特征是“数据驱动视图”，即UI = render(data)。
UI 的更新是一定需要副作用的，那么如何保证组件函数的“纯”呢？答案是将副作用在组件之外进行管理，所有的副作用都交由 hooks，组件可以使用 state，但并不拥有 state。
Hooks 相比类组件的优点：
- 关注点分离。在类组件中，逻辑代码放在生命周期中，代码是按照生命周期组织的。而在 hooks 写法中，代码按业务逻辑组织，更加清晰
- 写法更简单。省去了类组件写法中基于继承的各种复杂设计模式
Immutable.js
Immutable是用于达成函数式编程三要素中的“不可变值”。我的初次接触是在 Redux 中使用到，Redux 要求 reducer 中不能修改 state 而是应该返回新的 state，但这仅是一种“规范上的约定”，而不是“代码层面的限制”，而 Immutable 正是用于提供 JS 原生不存在的不可修改的数据结构。
Immutable 提供了一系列自定义数据结构，并提供相应的更新 API，而这些 API 将通过返回新值的方式执行更新。
let map1 = Immutable.Map({});
map1 = map1.set("name", "youky");
console.log(map1);
Immutable 内部的存储参考 字典树（Trie） 实现，在每次修改时，不变的属性将用索引指向原来的值，只对改变的值赋值新的索引。这样更新的效率会比整体拷贝高很多。
Redux
Redux 中体现函数式编程模式的也有很多地方：
- reducer 要是纯函数（如果需要副作用，则使用 redux-saga 等中间件）
- reducer 中不直接修改 state，而是返回新的 state
- 中间件的高阶函数与柯里化
- 提供了一个
compose函数，这是函数式编程中非常基本的工具函数
Redux 源码中的 compose 函数实现如下：
export default function compose(): <R>(a: R) => R;
export default function compose<F extends Function>(f: F): F;
/* two functions */
export default function compose<A, T extends any[], R>(
f1: (a: A) => R,
f2: Func<T, A>
): Func<T, R>;
/* three functions */
export default function compose<A, B, T extends any[], R>(
f1: (b: B) => R,
f2: (a: A) => B,
f3: Func<T, A>
): Func<T, R>;
/* four functions */
export default function compose<A, B, C, T extends any[], R>(
f1: (c: C) => R,
f2: (b: B) => C,
f3: (a: A) => B,
f4: Func<T, A>
): Func<T, R>;
/* rest */
export default function compose<R>(
f1: (a: any) => R,
...funcs: Function[]
): (...args: any[]) => R;
export default function compose<R>(...funcs: Function[]): (...args: any[]) => R;
export default function compose(...funcs: Function[]) {
if (funcs.length === 0) {
// infer the argument type so it is usable in inference down the line
return <T>(arg: T) => arg;
}
if (funcs.length === 1) {
return funcs[0];
}
return funcs.reduce(
(a, b) =>
(...args: any) =>
a(b(...args))
);
}
首先是用函数重载来进行类型声明。
在实现其实非常简单：
- 传入数组为空，返回一个自定义函数，这个函数返回接收到的参数
- 如果传入数组长度为 1，返回唯一的一个元素
- 使用 reduce 方法组装数组元素，返回一个包含元素嵌套执行的新函数
Koa
在 Koa 的洋葱模型中，通过 app.use 添加中间件，会将中间件函数存储于this.middleware
use (fn) {
if (typeof fn !== 'function') throw new TypeError('middleware must be a function!')
debug('use %s', fn._name || fn.name || '-')
this.middleware.push(fn)
return this
}
通过 koa-compose 模块将所有的中间件组合为一个函数 fn，在每次处理请求时调用
// callback 就是 app.listen 时绑定的处理函数
callback () {
const fn = this.compose(this.middleware)
if (!this.listenerCount('error')) this.on('error', this.onerror)
const handleRequest = (req, res) => {
const ctx = this.createContext(req, res)
return this.handleRequest(ctx, fn)
}
return handleRequest
}
这里的 compose 决定了多个中间件之间的调用顺序，用户可以通过 option 传入自定义的 compose 函数，或默认使用 koa-compose 模块。其源码如下：
function compose(middleware) {
if (!Array.isArray(middleware))
throw new TypeError("Middleware stack must be an array!");
for (const fn of middleware) {
if (typeof fn !== "function")
throw new TypeError("Middleware must be composed of functions!");
}
/**
* @param {Object} context
* @return {Promise}
* @api public
*/
return function (context, next) {
// last called middleware #
let index = -1;
return dispatch(0);
function dispatch(i) {
if (i <= index)
return Promise.reject(new Error("next() called multiple times"));
index = i;
let fn = middleware[i];
if (i === middleware.length) fn = next;
if (!fn) return Promise.resolve();
try {
return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
} catch (err) {
return Promise.reject(err);
}
}
};
}
同样是先对参数进行判断。与 redux 中的 compose 不同的是，koa 中的中间件是异步的，需要手动调用 next 方法将执行权交给下一个中间件。通过代码可知，中间件中接收的 next 参数实际就是 dispatch.bind(null, i + 1))也就是 dispatch 方法，以达到递归执行的目的。
这里使用 bind 实际上就是创建了一个偏函数。根据 bind 的定义，在 this 之后传入的若干个参数会在返回函数调用时插入参数列表的最前面。也就是说
const next = dispatch.bind(null, i + 1)) next() // 等价于dispatch(i+1)
附：函数式编程与数学原理
函数并不是计算机领域的专有名词。实际上，函数一词最早由莱布尼兹在 1694 年开始使用。
函数式编程的思想背后，其实蕴含了范畴论、群论等数学原理的思想。
以上就是从Immutable.js到Redux函数式编程的详细内容，更多关于Immutable.js Redux函数式编程的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于Echarts折线图实现一条折线显示不同颜色的相关资料,Echarts的折线图可以通过设置series中的itemStyle属性来改变折线的颜色,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
JS localStorage实现本地缓存的方法，需要的朋友可以参考一下2013-06-06
JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式,下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了js canvas实现画图、滤镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
JavaScript中遍历对象的property的3种方法介绍
这篇文章主要介绍了JavaScript中遍历对象的property的3种方法介绍,本文先是讲解了3种方法并用一张图片加深理解,然后给出代码实例,需要的朋友可以参考下2014-12-12
JavaScript动态插入script的基本思路及实现函数
偶尔需要动态插入javascript代码的需求，基本思路是动态创建一个script标签，设置其src属性，type属性等，需要的朋友可以参考下2013-11-11
这篇文章主要为大家详细介绍了js实现多张图片每隔一秒切换一张图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
javascript实现数组内值索引随机化及创建随机数组的方法
这篇文章主要介绍了javascript实现数组内值索引随机化及创建随机数组的方法,涉及javascript数组索引及随机数的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了原生js仿写手机端下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Javascript 实现放大镜效果实例详解的相关资料,这里附有实现实例代码，具有参考价值，需要的朋友可以参考下2016-12-12
最新评论