js的函数组合

一、组合简介

1、需求场景

我们需要将函数a的返回结果作为b的参数，然后将b的返回值作为c的参数：

	function a(number) {
      return number + 1;
    }
    function b(number) {
      return number + 2;
    }
    function c(number) {
      return number + 3;
    }
    console.log(c(b(a('a')))); //a123

二、组合实现及使用

1、封装函数

	function flow(...arg){
      if(arg.length===1){
        return arg[0];
      }else if(arg.length>1){
        return arg.reduce((a, b)=>(...argument)=>b(a(...argument)));
      }
    }

其实redux源码中也有，redux的compose就是使用js函数组合。

2、使用

	function a(number) {
      return number + 1;
    }
    function b(number) {
      return number + 2;
    }
    function c(number) {
      return number + 3;
    }
    const flows=flow(a, b, c);
    console.log(flows('a'));// a123

3、原理刨析

reduce函数就是累计，第一次传入函数是a,b，返回结果是

(...arguments)=>b(a(...arguments))

第二次是将上次结果作为a传入，因此，返回就是

(...arguments)=>c(b(a(...arguments)))

最终返回一个组合后新函数，执行函数并传参为字符串‘a’，最终返回a123

4、lodash也有此公用方法

引入方式为

import _ from 'lodash';
function a(number){
	return number + 1;
}
function b(number){
	return number + 1;
}
const flow=_.flow(a, b);
flow(1);

5、调用顺序相反怎么办

将代码做如下更改

	function flowRight(...arg){
      if(arg.length===1){
        return arg[0];
      }else if(arg.length>1){
        return arg.reduceRight((a, b)=>(...argument)=>b(a(...argument)));
      }
    }