1-02函数组合

函数组合 compose

函数组合可以让我们把细粒度的函数重新组合生成一个新的函数

函数组合

函数组合 (compose)：如果一个函数要经过多个函数处理才能得到最终值，这个时候可以把中间
过程的函数合并成一个函数

• 函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终
  结果
• 函数组合默认是从右到左执行

//函数组合演示
function compose(f, g){
    return function (value){
        return f(g(value));
    }
}

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

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

const last = compose(first, reverse);

console.log(last([6, 7, 8]));

lodash中的组合函数

• flow() 是从左到右运行
• flowRight() 是从右到左运行，使用的更多一些

//lodash中的组合函数
const _ = require('lodash');

const reverse = arr => arr.reverse();
const first = arr => arr[0];
const toUpper = s => s.toUpperCase();

const f = _.flowRight(toUpper, first, reverse);
console.log(f(['first', 'second', 'third']));

//THIRD

• 模拟实现lodash中的flowRight

//模拟实现lodash中的flowRight
function composeRight(...args){
    return function (value){
        return args.reverse().reduce(function(acc, fn){
            return fn(acc);
        }, value)
    }
}

// es6箭头函数写法
const composeRight = (...args) => value => args.reverse().reduce((acc,fn)=> fn(acc), value);

const f1 = composeRight(toUpper, first, reverse);
console.log(f1(['first', 'second', 'third']));

//THIRD

reduce使用

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

//total	必需。初始值, 或者计算结束后的返回值。
//currentValue	必需。当前元素
//currentIndex	可选。当前元素的索引
//arr	可选。当前元素所属的数组对象。
//initialValue	可选。传递给函数的初始值

//reduce函数使用
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
console.log(numbers.reduce(getSum));

函数组合满足结合律

//函数组合要满足结合律
const _ = require('loadash');

//等同写法
const f = _.flowRight(_.toUppper, _.first, _.reverse);
const f = _.flowRight( _.flowRight(_.toUppper, _.first), _.reverse);
const f = _.flowRight( _.toUppper,_.flowRight( _.first, _.reverse));

调试

• 函数组合 调试

//函数组合 调试
const _ = require('lodash');

const trace = _.curry((tag, v) =>{
    console.log(tag, v);
    return v;
})

const split = _.curry((sep, str) => _.split(str, sep));
const join = _.curry((sep, array) => _.join(array, sep));
const map = _.curry((fn, array) => _.map(array, fn) );

const f = _.flowRight(join('-'), trace('map后'), map(_.toUpper), trace('split后'), split(' '));
console.log(f('stay hungry'));

• lodash/fp模块

  • lodash 的 fp 模块提供了实用的对函数式编程友好的方法
  • 提供了不可变 auto-curried iteratee-first data-last 的方法

  // lodash 模块 --数据优先, 函数之后
  const _ = require('lodash')
  _.map(['a', 'b', 'c'], _.toUpper)
  // => ['A', 'B', 'C']
  _.map(['a', 'b', 'c'])
  // => ['a', 'b', 'c']
  
  _.split('Hello World', ' ')
  
  
  
  // lodash/fp 模块
  const fp = require('lodash/fp')
  
  fp.map(fp.toUpper, ['a', 'b', 'c'])
  fp.map(fp.toUpper)(['a', 'b', 'c'])
  
  fp.split(' ', 'Hello World')
  fp.split(' ')('Hello World')
  

• fp模块案例

//fp模块 调试
const fp = require('lodash/fp');

const trace = fp.curry((tag, v) =>{
    console.log(tag, v);
    return v;
})

const f = fp.flowRight(fp.join('-'), trace('map后'), fp.map(fp.toUpper), trace('split后'), fp.split(' '));
console.log(f('stay hungry'));

• lodash/fp模块 和 lodash 中 map 方法区别

  • lodash/fp模块中parseInt函数只接收第一个参数

  //lodash/fp模块 和 lodash 中 map 方法区别
  const _ = require('lodash');
  
  console.log(_.map([1, 2, 3], parseInt));   // [1, NaN, NaN]
  // parseInt('1', 0, array);  //parseInt 第二个参数value:[2-36], 为0默认十进制转换
  // parseInt('2', 1, array);
  // parseInt('3', 2, array);
  
  
  const fp = require('lodash/fp');
  
  console.log(fp.map( parseInt, [1, 2, 3]));  //函数优先
  

PointFree

**Point Free：**我们可以把数据处理的过程定义成与数据无关的合成运算，不需要用到代表数据的那个参
数，只要把简单的运算步骤合成到一起，在使用这种模式之前我们需要定义一些辅助的基本运算函数。

• 不需要指明处理的数据
• 只需要合成运算过程
• 需要定义一些辅助的基本运算函数

// Point Free
const fp = require('lodash/fp');

const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toUpper);

console.log(f('stay hungry'));




//案例：world wild web  ==> WWW

// const firstLettertoUpper = fp.flowRight(  fp.join(''), fp.map(fp.first), fp.map(fp.toUpper), fp.split(' '));
const firstLettertoUpper = fp.flowRight(  fp.join(''), fp.map(fp.flowRight(fp.first,fp.toUpper)), fp.split(' ')); //优化map

console.log(firstLettertoUpper('world wild web'));