实战 - JavaScript 函数式编程 - Powered by Discuz! Archiver

与世无争逍遥一生 發表於 2020-5-11 16:48:00

实战 - JavaScript 函数式编程

最近和做技术的朋友聊天的时候，发现自己居然不能将函数式编程思想讲清楚，于是做一次复习
 
一、函数是“一等公民”
常常都能听到这么一句话：在 JavaScript 中，函数是“一等公民”，这句话到底意味着什么？
在编程语言中，一等公民可以作为函数参数，可以作为函数返回值，也可以赋值给变量 —— Christopher Strachey
其实在很多传统语言中（比如 C，JAVA 8 以前）函数只可以声明和调用，无法像字符串一样作为参数使用
而 JavaScript 中的函数与其他数据类型处于平等地位，这是函数式编程的前提
 
二、纯函数 (pure functions)
现在正式接触函数式编程，首先看一个简单的需求：
有这样的一堆用户信息
<div class="cnblogs_code">
<pre>const arr = [
{name: '赵信', gender: 1, age: 25, high: 176, weight: 62},
{name: '艾希', gender: 2, age: 23, high: 161, weight: 46},
{name: '阿狸', gender: 2, age: 27, high: 182, weight: 53},
{name: '盖伦', gender: 1, age: 27, high: 175, weight: 78},
{name: '沃里克', gender: 1, age: 42, high: 169, weight: 70},
{name: '安妮', gender: 2, age: 16, high: 153, weight: 43},
{name: '卡尔玛', gender: 2, age: 40, high: 168, weight: 48},
{name: '菲兹', gender: 0, age: 52, high: 163, weight: 50},
{name: '亚索', gender: 1, age: 35, high: 177, weight: 65},
{name: '锐雯', gender: 2, age: 33, high: 172, weight: 52},
]</pre>
</div>
编写一个过滤用户信息的函数，统计18岁以上男性有多少人，且记录他们的身高和姓名
也许你会这么写：
<div class="cnblogs_code">
<pre>const male = {
count: 0,
list: [],
};

const MIN_AGE = 18;

const Count = (arr) => {
for (const item of arr) {
if (
 !item
 || +item.age < +MIN_AGE
 || `${item.gender}` !== '1'
) { continue }
male.count++;
male.list.push({
 name: item.name,
 high: item.high,
});
}
}</pre>
</div>
似乎没什么问题的亚子，我们工作中也会写这样的函数
但上面的 MIN_AGE、male 都是外部变量（或者说全局变量）
我们在写业务的时候，这样的写法挑不出什么毛病，但他们都不是纯函数
纯函数具备两个特点：
1. 不依赖外部状态，相同的输入永远得到相同的输出；
2. 没有副作用，不会修改入参或者全局变量。 // splice 说的就是你！
就上面的例子来说，如果连续执行几次 Count(arr) 就会出问题：
<img src="https://img2020.cnblogs.com/blog/1059788/202005/1059788-20200506194458279-1174169706.png" alt="">
如果按照纯函数的标准，可以改成这样：
<div class="cnblogs_code">
<pre>const Count = (arr, min) => {
// 创建一个局部变量
const res = {
count: 0,
list: [],
};
for (const item of arr) {
if (
 !item
 || +item.age < +min // 使用入参而不是全局变量
 || `${item.gender}` !== '1'
) { continue }
res.count++;
res.list.push({
 name: item.name,
 high: item.high,
});
}
// 返回结果
return res;
}</pre>
</div>
这样调整之后，函数就实现了完全的自给自足，我们也能很清楚的知道这个函数所依赖的参数是什么
但仅仅是这样的调整似乎没有什么特别之处，假如我们筛选条件改为体重小于 50kg 的女性，这个函数就需要做许多调整
别急，我们才刚开始，接下来就打造一个易维护、可读性高的业务函数
 
三、柯里化 (curry)
上面的例子其实采用的是命令式编程的思想，关注的是如何一步一步实现当前的需求
而函数式编程更像是用一个一个的加工站组合起来的工厂流水线，他也能实现需求，但更关注的是如何使用加工站
这个加工站就是柯里化，柯里化的概念很简单：将一个多参数函数，转换成一个依次调用的单参数函数
<div class="cnblogs_code">
<pre>fun(a, b, c)->fun(a)(b)(c)</pre>
</div>
需要注意柯里化和局部调用的区别
局部调用是指：只传递给函数一部分参数，并返回一个函数去处理剩下的参数
<div class="cnblogs_code">
<pre>fun(a, b, c) -> fun(a)(b, c) / fun(a, b)(c)</pre>
</div>
不过在实际工作中，由于都是使用工具库（比如 Lodash，Ramda）提供的 curry 函数，而这些 curry 函数通常既满足柯里化，也满足局部调用，所以这两个概念对实际工作没什么影响
先从一个简单的例子来认识柯里化，首先声明一个求和函数
<div class="cnblogs_code">
<pre>const sum = (x, y, z) => x + y + z;</pre>
</div>
然后实现一个简单的 curry 函数（通常我们不会自己去写 curry 函数，而是直接使用各种工具库提供的 curry 函数）
<div class="cnblogs_code">
<pre>const curry = (fn) => {
return function recursive(...args) {
 // 如果args.length >= fn.length则表明传入了足够的参数，此时调用fn并返回
 if (args.length >= fn.length) {
 return fn(...args);
 }

 // 否则表明没有传入足够的参数，此时返回一个函数,用这个函数接受后面传递的新参数
 return (...newArgs) => {
 // 递归调用recursive函数,并返回
 return recursive(...args.concat(newArgs));
 };
};
};</pre>
</div>
将 sum 函数柯里化
<div class="cnblogs_code">
<pre>const Sum = curry(sum); // -> Sum(10)(11)(12); // -> 33 
const Sum10 = Sum(10); // -> 
const Sum10_11 = Sum10(11);// -> 
Sum10_11(12); // -> 33 </pre>
</div>
我们可以直接使用柯里化之后的 Sum 来得到最终结果，也可以基于 Sum 创建出两个特定的单入参函数 Sum10 和 Sum10_11，大大的增强了原本的 sum 函数的灵活性
而这些单入参函数是函数组合的基础。
 
四、函数组合 (compose) 
如果一个值要经过多个函数才能变成另外一个值，就可以把所有中间步骤合并成一个函数，这就是函数组合
<div class="cnblogs_code">
<pre>const compose = (f, g) => x => f(g(x))</pre>
</div>
以这个极简版的 compose 函数举个例子：
<div class="cnblogs_code">
<pre>const f = x => x + 1;
const g = x => x * 2;
const fg = compose(f, g);
fg(1)// ----> ?</pre>
</div>
别用控制台调试，能看出 fg(1) 的结果是 3 还是 4 么？
如果有经过思考，就会发现一个细节：函数组合中的函数是倒序执行的，我们的入参是 (f, g)，但实际执行的顺序是 g -> f
现在假设我们有四个工具函数：
<div class="cnblogs_code">
<pre>filter18(arr); // 从数组中返回年龄大于18岁的数据
filterMale(arr); // 从数组中筛选出男性数据并返回新数组
pickNameHeight(arr); // 获取数组中的姓名和身高字段并返回新数组 log(arr); // 打印参数</pre>
</div>
按照命令式编程的思路，如果要通过这四个函数实现最初的那个筛选用户信息的需求，就需要这么写：
<div class="cnblogs_code">
<pre>log(pickNameHeight(filterMale(filter18(arr))));</pre>
</div>
看得眼花是不是？使用 compose 试试：
<div class="cnblogs_code">
<pre>const fun = compose(log, pickNameHeight, filterMale, filter18);
fun(arr);</pre>
</div>
现在就清晰多了，通过入参我们能一眼看出这条流水线做了什么
而且将不同的函数用不同的方式组合，还能得到更多更灵活的函数，这恰恰是函数式编程的魅力所在
 
和 curry 函数一样，我们通常都是直接使用各种工具库提供的 compose 函数
而这些工具库通常还会提供一个 pipe 函数，这个函数的作用 compose 类似，但 pipe 的执行顺序和 compose 相反，会将入参函数从前往后组合
现在我们掌握了函数式编程的两大利器： curry 和 compose，再回头想想最开始的那个需求吧
 
五、实战
再来过一遍需求：编写一个过滤用户信息的函数，统计18岁以上男性有多少人，且记录他们的身高和姓名
其实我们只需要做三件事，首先过滤出18岁以上的数据，然后过滤出男性，最后获取其身高和姓名
 
1. 过滤出18岁以上的数据，首先需要实现一个用于比较大小的工具函数
<div class="cnblogs_code">
<pre>// 校验对象中的某个 key 是否大于临界值 val
function porpGt(key, val, item) { return item > val
}</pre>
</div>
将这个函数柯里化，就能得到过滤 18 岁的工具函数
<div class="cnblogs_code">
<pre>const cPropGt = curry(porpGt); // porpGt(a, b, c) -> cPropGt(a)(b)(c)
const filter18 = cPropGt('age')(18);// cPropGt('age')(18)(item) -> filter18(item)
arr.filter(filter18); // 返回 age 大于 18 的数据</pre>
</div>
 
2. 过滤出男性，这需要一个判断等值的工具函数
<div class="cnblogs_code">
<pre>// 判断对象中的某个 key 是否等于临界值 val
function porpEq(key, val, item) {
return `${item}` === `${val}`
}</pre>
</div>
同样的执行柯里化，然后得到过滤男性的工具函数
<div class="cnblogs_code">
<pre>const cPropEq = curry(porpEq); // porpEq(a, b, c) -> cPropEq(a)(b)(c)
const filterMale = cPropEq('gender')(1);// cPropEq('gender')(1)(item) -> filterMale(item)
arr.filter(filterMale); // 返回 gender 等于 1 的数据</pre>
</div>
 
3. 记录身高和姓名，需要一个从对象中提取值的工具函数
<div class="cnblogs_code">
<pre>// 从对象中提取多个值并返回新的对象
function pickAll(keys, item) {
const res = {};
keys.map(key => res = item);
return res;
}</pre>
</div>
柯里化，并保留 name 和 high 两个字段
<div class="cnblogs_code">
<pre>const cPickAll = curry(pickAll);
const pickProps = cPickAll(['name', 'high']);
arr.map(pickProps); // 只保留 name 和 high</pre>
</div>
 
完成这三步之后，如果采用面向对象的写法，可以直接链式调用：
<div class="cnblogs_code">
<pre>arr.filter(filter18)
.filter(filterMale)
.map(pickProps)</pre>
</div>
而如果使用了工具库，通常会带有 filter()、map() 这样的工具函数，其功能和数据的 filter、map 一样，只是调用的方式有些区别
所以使用工具库的话，就可以很方便的使用函数组合：
<div class="cnblogs_code">
<pre>const Count = compose(
map(pickProps),
filter(filterMale),
filter(filter18),
);
Count(arr);</pre>
</div>
如果需要调整过滤条件，就只需要稍微修改一下工具函数的入参，生成新的工具函数之后再组合即可
 
六、小结
函数式编程会让代码显得更清晰，更易维护
但从上面的例子也可以看出，命令式的写法只进行了一次遍历，而函数式编程的写法却遍历了三次
所以我想提醒看到这里的小伙伴，函数式编程并不是放之四海皆准的万能药，甚至在某些性能要求很严格的场合，函数式编程并不是太合适的选择
我认为命令式编程、面向对象编程、函数式编程之间的关系就像是汽车、轮船、飞机之间的关系一样
他们之间并不存在绝对的优劣好坏，也许在大部分的场合，飞机的速度会比汽车更快，但在崇山峻岭之间，飞机也没法安然着陆
多学习一种编程思想，只是多掌握了一门技能，仅此而已。
 
参考资料：
《函数式编程指北》 
《函数式编程入门教程》 
来源：https://www.cnblogs.com/wisewrong/p/12531629.html

頁: [1]

琼殿技术论坛's Archiver

实战 - JavaScript 函数式编程