函数式编程范式：函数的组合

目录

如果有小伙伴想要回顾之前的知识的话，点击下面的链接查看之前所有的学习栏目👇：
《大前端学习专栏：目录》

概念

纯函数和柯里化函数非常容易写出洋葱代码：h(f(e(x)))，一层套着一层就像一个洋葱一样。
解决这种问题的思路是函数组合（compose），函数组合就是将许多细粒度的函数组合起来形成一个管道，数据通过管道一层一层加工后返回最终的结果。注意：函数组合的调用顺序是从右往左。

示例

以下是一个获取数组中最后一个元素的值的函数组合案例：

//组合函数
function compose(f, g) {
  return function (value) {
    return f(g(value));
  };
}
//翻转数组
function reverse(arr) {
  return arr.reverse();
}
//获取数组的第一个元素
function first(arr) {
  return arr[0];
}
//翻转数组之后获取数组的第一个元素
const getLast = compose(first, reverse);
console.log(getLast([1, 2])); //2

当然，有些人会觉得这样写非常麻烦，但是reverse、first还可以和其他函数任意组合成功能更加强大的函数，这样 就能体现出函数组合的优点了。

当然，以上的compose函数并不具备两个参数以上的函数组合，所以我们需要将compose变为动态的参数：

function compose(...args) {
  return function (value) {
    return args.reverse().reduce((prev, cur) => cur(prev), value);
  };
}

函数组合的结合律

结合律的意思是，假设有3个函数需要组合，先组合前两个，再组合后一个与先组合后两个，再组合前一个的结果应该是一样的：

function compose(...args) {
  return function (value) {
    return args.reverse().reduce((prev, cur) => cur(prev), value);
  };
}

function reverse(arr) {
  return arr.reverse();
}

function first(arr) {
  return arr[0];
}

function toUpper(str) {
  return str.toUpperCase();
}

const getLast = compose(compose(toUpper, first), reverse);
const getLast2 = compose(toUpper, compose(first, reverse));

console.log(getLast(['a', 'b'])); //B
console.log(getLast2(['a', 'b'])); //B