前言
纯函数这个这个词我相信小伙伴们多多少少都听说过,它是函数式编程的基础。本文主要是对纯函数进行探讨,包括基本概念,优点,运用的经典案例以及我们日常该如何去合理的使用等等。
纯函数的概念
首先我们来看看纯函数的基本概念:
相同的输入,总是会的到相同的输出,并且在执行过程中没有任何副作用。
该怎么去理解上面的概念呢?我们要把上面这句话拆成两部分来看。
相同的输入,总是会得到相同的输出。
来看看下面的例子:
let a = 1;
function xAdd(x) {
return x + a;
};
xAdd(1); //2
上面这个函数就不是一个纯函数,因为在我们程序执行的过程中,变量a
很可能会发生改变,当变量a发生改变时,我们同样执行xAdd(1)
时得到的输出也就不同了。
再看另一个例子:
function sum(x, y) {
return x + y;
};
sum(1,2); //3
在这个例子中,符合相同的输入得到相同的输出这个概念,sum
是一个纯函数。
执行过程中没有任何副作用。
这里我们要搞清楚什么是副作用,这里的副作用指的是函数在执行过程中产生了外部可观察变化。
- 发起HTTP请求
- 操作DOM
- 修改外部数据
- console.log()打印数据
- 调用Date.now()或者Math.random()
上面一系列操作都可以被称为是副作用。下面可以接着看一个修改外部数据从而产生副作用的例子:
let a = 1;
function func() {
a = 'b';
};
func();
console.log(a); // b
我们运行了func
函数,外部的变量a
的值发生了改变,这就是产生了所谓的副作用,所以func
不是一个纯函数。当我们这样进行修改:
function func2() {
let a = 1;
a = 'a';
return a
};
func(); // a
函数fun2
不会对产生外部可观察变化,也就不会产生副作用,它就是一个纯函数。
一个纯函数,上面所说的两个条件缺一不可。
纯函数的好处
通过了解纯函数的概念,我相信有的小伙伴已经能感觉到纯函数的一些的好处了:
- 更容易进行测试,结果只依赖输入,测试时可以确保输出稳定
- 更容易维护和重构,我们可以写出质量更高的代码
- 更容易调用,我们不用担心函数会有什么副作用
- 结果可以缓存,因为相同的输入总是会得到相同的输出
纯函数运用的经典案例
既然纯函数有这么多好处,那么我们来看看有哪些运用纯函数的经典案例。
数组的基本方法
数组的很多基本方法都是纯函数,例如map
,forEach
,filter
,reduce
等等。
redux中的reducer
Redux中三大原则之一使用纯函数来执行修改,其中就运用了Reducer来描述 action 如何改变 state tree。
Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。 --Redux
中文文档
Lodash
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。我相信很多小伙伴也经常用到吧,这也是纯函数代表。
当然还有很多,这里就不一一举例了,总的来说,纯函数还是十分常见的。
我们如何合理去使用
在实际开发中,我们可以合理的去运用纯函数来提高我们的开发效率和代码质量。
纯函数组件
我们可以使用纯函数的的方式来创建组件:
function Header(props) {
return {props.text}
}
对比一下使用Class(类)组件的方式创建组件:
class Header extends React.Component {
render() {
return {this.props.text}
}
}
我们可以总结出纯函数组件的一些优点:
- 无副作用,我们不用担心副作用带来的一些难以捕捉的问题
- 语法更简洁,可读性好,代码量相对较小,易复用
- 占用内存小,无生命周期和状态管理,提升了性能
当然纯函数组件也有自己的缺点,例如:没有生命周期。
生命周期有时候并不可少,所幸现在我们也已经有了很好的解决方案——react-hooks。利用hooks函数,我们可以在函数组件中使用等价于生命周期,状态管理等方法。
合理运用纯函数编写公共方法
在编写公共方法的时候,我们尽量用纯函数来进行编写。
假设我们要编写一个把数组中的小写字母转为大写字母的公共方法:
let lists = ["q","w","e"];
let upperCaseLists = () => {
let arr = [];
for (let i=0, length= lists.length; i
上面这个函数虽然可以实现逻辑复用,但是有副作用,肯定是不适合用来做公共方法的,所以我们要优化它:
let upperCaseLists = (value) => {
let arr = [];
for (let i=0, length= value.length; i
使用可读性更好的forEach
来优化:
let upperCaseLists = (value) => {
let arr = [];
value.forEach((item) => {
arr.push(item.toUpperCase());
})
return arr;
}
继续用map进一步优化:
let upperCaseLists = (value) => {
return value.map((item) => item.toUpperCase())
}
是不是很简洁?具体方法怎么优化要根据实际情况和业务需求来。
参考
https://segmentfault.com/a/11...
https://cuggz.blog.csdn.net/a...
最后
纯函数这个概念其实并不复杂,在没有深入了解之前我们工作中也一定遇到过,也在不经意间用过。只有要合理的去运用它,就是开发中的一把利器。