ES6语法之函数式编程实现 pipeline

最新推荐文章于 2023-08-17 15:23:05 发布

原创最新推荐文章于 2023-08-17 15:23:05 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

文章标签：

26 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现函数式编程中Pipeline模式的方法。通过reduce函数和箭头函数，可以将多个函数按顺序组合起来，形成一条处理数据的流水线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们的目标是给定一个初始值以后，用pipeline的方法实现不同函数运算的顺序执行，从而得出最终结果。

最终实现应该如下：

var result = pipeline(initialValue, func1, func2, func3...);

首先先写几个函数吧：

var double = n => n * 2;
var pow = n => n * n;
var pow3 = n => n * n * n;

这里用了ES6中的箭头函数。对于有返回值的函数，用箭头函数写出来简洁而清晰。

函数的顺序执行，就想到了前后的函数必须有联系。

我们可以用Array. reduce( ) 方法。

详细描述请见以下链接：

函数式编程的一个基本思想就是，你可以把有返回值的函数当成一个变量在函数中传参调用。

所以我们可以这么写：

funcs.reduce(function(pre,cur){
 return cur(pre);
}, val);

这里初始值为val, 也就是我们要传入pipeline计算的那个值。

在首次计算中， pre就是 val, 以后的pre值都是前次的return cur(pre)；

稍稍动下脑筋，就知道此功能可以实现当前函数调用前次函数的返回值，从而实现流水线调用。

funcs是一个函数数组，第一我们想到的是用Array.push()。

实际上完全不用这么麻烦，可以用 … 运算符实现参数列表到数组的转换，这也是ES6的一个爽点。

貌似说得七七八八了，我们就来封装一下这个函数：

function pipeline(val, ...funcs) {
  return funcs.reduce(function (pre, cur) {
    return cur(pre);
  }, val);
}

好，接下来我们直接传参：

var result = pipeline(2, double, pow, pow3); // 4096

完美执行！

可是这就完了吗?

不！这还没有get到函数式变成的精髓。

我们是有追求的屌丝码农。

极简！极简！极简!

那好，咱们就来装个内什么吧。。。

改写下：

var pipeline = (val, ...funcs) => funcs.reduce((pre, cur) => cur(pre), val);

一行代码搞定！

结果一样！

var result = pipeline(2, double, pow, pow3); // 4096

而且所传函数个数不限。

当然，代码的易读性很重要。

所以不装也罢。