ES12 中的函数 Pipe 和 Compose

在 ES12 中，我们可以使用更加便捷的方式来组合函数，那就是使用函数 Pipe 和 Compose。这两个函数都是函数式编程中常用的函数结合方式，它们都可以让我们更加优雅地组合函数。

函数 Pipe

函数 Pipe 可以把多个函数串联起来，让它们逐步处理数据，最终返回一个结果。Pipe 的作用相当于将一组函数进行串联，并将数据从左到右依次传递。在 JavaScript 中，我们可以通过调用 Array.prototype.reduce 方法和函数的 apply 方法来实现 Pipe 方法。

下面是一个简单的使用例子：

const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);

const add = (a, b) => a + b;
const square = (x) => x * x;
const double = (x) => x * 2;
const addSquareDouble = pipe(add, square, double);

console.log(addSquareDouble(1, 2)); // 18

这里我们定义了一个 pipe 函数，它接收任意数量的函数参数，并返回一个新的函数，该新函数接收一个数据参数，并将数据从第一个函数依次处理到最后一个函数，最终返回结果。

在上面的示例中，我们定义了三个计算函数：add、square、double，然后使用 pipe 将它们进行组合成 addSquareDouble 函数。这个函数会先计算两个数的和，然后对结果进行平方，最后将结果乘以 2，并返回最终结果。

当然，这只是使用 Pipe 的最基本用法，它能够组合的函数数量是没有限制的。

函数 Compose

函数 Compose 类似于函数 Pipe，它也用于将多个函数组合成一个函数。但与 Pipe 不同的是，Compose 把多个函数组合成一个新函数的顺序是从右往左进行的。

下面是一个简单的使用例子：

const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

const add = (a, b) => a + b;
const square = (x) => x * x;
const double = (x) => x * 2;
const addSquareDouble = compose(double, square, add);

console.log(addSquareDouble(1, 2)); // 18

这里我们定义了一个 compose 函数，该函数接收任意数量的函数作为参数，并返回一个新函数，该新函数的作用是先调用最后一个函数，然后依次将结果传递给所有的函数，最终返回最终结果。

在上面的示例中，我们依然定义了三个计算函数：add、square、double，然后使用 compose 将它们进行组合成 addSquareDouble 函数。这个函数会先对两个数进行加法运算，然后对结果求平方，最后将结果乘以 2，并返回最终结果。

总结

函数 Pipe 和 Compose 对于需要将多个函数组合为一个函数的场景非常实用，尤其是在函数式编程中。这两个函数可以让我们以简洁明了的方式组合函数，并使代码易于维护和扩展。

虽然 ES12 中的函数 Pipe 和 Compose 对于一些前端应用来说并不是那么必要，但了解它们的使用方法会让我们能够更好地理解函数式编程的思想，也能够给我们带来更多的启示和指导。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f83fe5f6b2d6eab30606f3