共计 2476 个字符,预计需要花费 7 分钟才能阅读完成。
前言
纯函数这个这个词我置信小伙伴们多多少少都据说过,它是函数式编程的根底。本文次要是对纯函数进行探讨,包含基本概念,长处,使用的经典案例以及咱们日常该如何去正当的应用等等。
纯函数的概念
首先咱们来看看纯函数的基本概念:
雷同的输出,总是会的到雷同的输入,并且在执行过程中没有任何副作用。
该怎么去了解下面的概念呢?咱们要把下面这句话拆成两局部来看。
雷同的输出,总是会失去雷同的输入。
来看看上面的例子:
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 <h2>{props.text}</h2>
}
比照一下应用 Class(类)组件的形式创立组件:
class Header extends React.Component {render() {return <h1>{this.props.text}</h1>
}
}
咱们能够总结出纯函数组件的一些长处:
- 无副作用,咱们不必放心副作用带来的一些难以捕获的问题
- 语法更简洁,可读性好,代码量绝对较小,易复用
- 占用内存小,无生命周期和状态治理,晋升了性能
当然纯函数组件也有本人的毛病,例如:没有生命周期。
生命周期有时候并不可少,所幸当初咱们也曾经有了很好的解决方案——react-hooks。利用 hooks 函数,咱们能够在函数组件中应用等价于生命周期,状态治理等办法。
正当使用纯函数编写公共办法
在编写公共办法的时候,咱们尽量用纯函数来进行编写。
假如咱们要编写一个把数组中的小写字母转为大写字母的公共办法:
let lists = ["q","w","e"];
let upperCaseLists = () => {let arr = [];
for (let i=0, length= lists.length; i<length; i++) {let item = lists[i];
arr.push(item.toUpperCase());
}
lists = arr;
}
下面这个函数尽管能够实现逻辑复用,然而有副作用,必定是不适宜用来做公共办法的,所以咱们要优化它:
let upperCaseLists = (value) => {let arr = [];
for (let i=0, length= value.length; i<length; i++) {let item = value[i];
arr.push(item.toUpperCase());
}
return arr;
}
应用可读性更好的 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…
https://www.redux.org.cn/
最初
纯函数这个概念其实并不简单,在没有深刻理解之前咱们工作中也肯定遇到过,也在不经意间用过。只有要正当的去使用它,就是开发中的一把利器。