JS函数式编程中的纯函数

马黑黑 · 发表于 2024-5-15 11:35

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

函数式编程发端于上个世纪五十年代，最初用于lambda语言的演算。其理念是一切皆函数，由一大堆一元或二元参数的函数拼装而成，每一个函数通常只作一件事情。这种设计思想摈弃了过程式、命令式等编程理念的做法，重在以抽象的方式封装诸多处理单一问题的函数，然后再将封装的函数组合起来，最后产生所期待的结果。

函数式编程的每一个函数都是纯函数，它不依赖外部变量，不受全局变量的影响，仅仅通过传参来计算并返回运行结果。在JS中，随着JS的不断迭代，函数式编程也得到了广泛使用。这里，为了理解纯函数，我们以随机生成 rgb 颜色为例，看看JS如何通过纯函数去实现。

在具体实现之前，我们有必要先简单了解一下 rgb 颜色表达体系的特征：r 代表 red 即红色，g 代表 green 即绿色，b 代表 blue 即蓝色，三种颜色以不同的比例混合在一起就能构成一种新的颜色。每一种源颜色的取值范围是 0~255，例如，rgba(255, 103, 0) 就构成了前面 rgb 表达结构文本这样的颜色。

现在可以开干了。我们首先需要设计一个函数，用来生成 0~255 的随机数。按照函数式编程的准则之一，一元化参数，它尽可能只接收一个传参，那我们试着这样编写：

var getRanNum = (n) => Math.random() * n;

getRanNum(n) 需要调用者传来一个参数 n，n 将在 0~255 范围内取值，但如果用在别处而非生成 rgb 随机颜色也可以不受此限制，即便用在 rgb 颜色它也拥有较高的自由度：使用者可以设定 rgb 中任意一个三原色成分的下限以便获得定制性更强的随机颜色。可见其复用性是很广泛的。

getRanNum(n) 函数能生成一个随机数，但它是一个浮点数，小数点后面的数字好长，我们需要加工一下：

var getRanNum = (n) => Math.round(Math.random() * n);

其实就是将运算结果取整，Math.round 是四舍五入的数学方法。

接下来我们要用 getRanNum(n) 函数生成三个随机数，并按照 rgb(R,G,B) 这样的语句结构将生成的结果拼装起来。

var mkRgb = (ar) => `rgb(${ar.map(item => getRanNum(item))})`;

mkRgb(ar) 函数也是一个纯函数，它接收一个传参 ar，顾名思义是一个数组，数组结构类似这样，[255,100,200]，可以根据需要改变数组元素个数和里面的元素数值。函数比较抽象，这里解释一下：我们用JS内置的 map 函数迭代数组，将其数组元素值一个一个地作为传参 n 传给前面写好的函数 getRanNum(n) 进行处理并返回处理结果——这将得到一个新的数组，而数组元素天然使用了小角逗号将数组元素连结起来，正好符合 rgb 颜色表达结构的要求。至于拼装 rgb 语句结构的其它字符，我们使用反引号 `` 就非常省事了，无需多写哪怕半行的代码——代码中红色的部分就是 rgb() 语句框架，美元符号加花括号内的语句是生成随机数的程序语句。

以下实例使用上述原理完成。每次点击元素界面任意处，均会产生随机 rgb 颜色，元素背景色即为当次点击所产生的颜色，颜色值出现在元素的正中央：

实例代码：

<style>

#mydiv { margin: 20px auto; display: grid; place-items: center; width: 400px; height: 200px; border: 1px solid gray; position: relative; }

#outMsg { padding: 10px 20px; background: white; width: fit-content; border-radius: 20px; }

</style>

var getRanNum = (n) => Math.round(Math.random() * n);

var mkRgb = (ar) => `rgb(${ar.map(item => getRanNum(item))})`;

mydiv.onclick = () => outMsg.textContent = mydiv.style.background = mkRgb([255,255,255]);

mydiv.click();

</script>

马黑黑 · 发表于 2024-5-15 12:35

本帖最后由马黑黑于 2024-5-15 13:09 编辑

纯函数的两个条件：一，一个函数的返回结果只依赖于它的参数；二，在函数的执行过程中没有副作用，比如不改变函数外部声明的变量。
本文示例用到的js内置函数 map 本身也是一个纯函数：它依赖传入的数组或可迭代数据生成结果，其结果是一个新的数组或可迭代数据，所传入的数组（来自外部）不会被改变。

不是所有的函数都非得是纯函数不可。实现编程中，我们总有面向对象，面向过程。对象，例如一个div盒子，它要改变背景色或文本颜色什么的，我们就需要去改变它的相关属性；过程，例如运行请求关键帧动画 requestAnimationFrame 的标识变量 raf，它每一次执行动画都在改变 raf 的值。这些，固守纯函数原则是实现不了的。但是建议在编程的时候尽可能地使用纯函数，一个函数实现一个功能，如此，众多的函数通过复合、链式调用、高阶等方式的应用就可以实现复杂的功能，最后一击，比如需要面向对象了，需要面向过程了，我们就用非纯函数来完成工作。

单一功能的纯函数一来方便复用，且复用的广度相等客观，二来函数指向性明确，便于修改、维护，三来还可以通过高阶化使得函数可扩展性超强、通过复合应用可以实现复杂的功能等等。此外，纯函数通常都可能极其简短，代码会非常简洁明了。

不过纯函数需要较高的学习成本。