关注本文作者公众号
获取最新福利
微信公众号

reduce与redux中compose函数

时间: 11/29/2017作者: ll浏览量: 385

在说compose函数之前,我们先来看一道题目:

image.png

Your task is to write a higher order function for chaining together a list of unary functions. In other words, it should return a function that does a left fold on the given functions.

chained([a,b,c,d])(input)

Should yield the same result as

d(c(b(a(input))))

大致意思就是写个函数 能将多个函数进行组合成一个函数,就是一元链式函数

思考

当时我想,要想实现一个这样的函数,肯定是需要有一个遍历的过程,一个函数的执行结果是另一个函数的参数,那这样就需要有个累计的过程,综合以上2点,想到数组中有个reduce函数。这里我们来看看reduce函数:

arr.reduce(callback[, initialValue])

其中 callback是执行数组中每个值的函数,它包含四个参数:

  • accumulator 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(如下所示)。

  • currentValue 数组中正在处理的元素。

  • currentIndex[可选] 数组中正在处理的当前元素的索引。 如果提供了initialValue,则索引号为0,否则为索引为1。
  • array[可选] 调用reduce的数组

initialValue [可选] 用作第一个调用 callback的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

下面的例子求数组成员之和。

[1, 2, 3, 4, 5].reduce(function(x, y){
  console.log(x, y)
  return x + y;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果:15

上面代码中,第一轮执行,x是数组的第一个成员,y是数组的第二个成员。从第二轮开始,x为上一轮的返回值,y为当前数组成员,直到遍历完所有成员,返回最后一轮计算后的x。

利用reduce方法,可以写一个数组求和的sum方法。

Array.prototype.sum = function (){
  return this.reduce(function (pre, next) {
    return pre + next;
  })
};

[3, 4, 5, 6, 10].sum()
// 28

如果要对累积变量指定初值,可以把它放在reduce方法的第二个参数。

[1, 2, 3, 4, 5].reduce(function(x, y){
  return x + y;
}, 10);
// 25

上面代码指定参数x的初值为10,所以数组从10开始累加,最终结果为25。注意,这时y是从数组的第一个成员开始遍历。

第二个参数相当于设定了默认值,处理空数组时尤其有用。

function add(prev, cur) {
  return prev + cur;
}

[].reduce(add)
// TypeError: Reduce of empty array with no initial value
[].reduce(add, 1)
// 1

上面代码中,由于空数组取不到初始值,reduce方法会报错。这时,加上第二个参数,就能保证总是会返回一个值。

解决

在上面我们了解学习reduce之后,我们可以开始来解决这道题了,看代码:

function chained(funcs) {
  return function(input){
    return funcs.reduce(function(input, fn){ return fn(input) }, input);
  }
}

验证一下

function f1(x){ return x*2 }
function f2(x){ return x+2 }
function f3(x){ return Math.pow(x,2) }

function f4(x){ return x.split("").concat().reverse().join("").split(" ")}
function f5(xs){ return xs.concat().reverse() }
function f6(xs){ return xs.join("_") }

Test.assertEquals( chained([f1,f2,f3])(0), 4 )
Test.assertEquals( chained([f1,f2,f3])(2), 36 )
Test.assertEquals( chained([f3,f2,f1])(2), 12 )

Test.assertEquals(chained([f4,f5,f6])("lorem ipsum"), "merol_muspi")

image.png 嗯,很好,验证通过的,没什么问题!

进一步思考

问题是解决了,但是认真想想一下,这里的题目的需求是不是和redux中compose函数实现的需求一样呢,嗯,我们来看看compose是怎么实现的。

https://github.com/reactjs/redux/blob/v3.7.2/src/compose.js

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

用es6写的,关于es6的知识,可以看 ECMAScript 6 入门或者es6的十大特性

参考这个compose函数的写法,我们来解一下上面那道题,

function chained(...funcs) {
    if (funcs.length === 0) {
       return arg => arg
    }

    if (funcs.length === 1) {
      return funcs[0]
    }

    return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

验证一下:

function f1(x){ return x*2 }
function f2(x){ return x+2 }
function f3(x){ return Math.pow(x,2) }

function f4(x){ return x.split("").concat().reverse().join("").split(" ")}
function f5(xs){ return xs.concat().reverse() }
function f6(xs){ return xs.join("_") }

Test.assertEquals( chained(f1,f2,f3)(0), 4 )
Test.assertEquals( chained(f1,f2,f3)(2), 36 )
Test.assertEquals( chained(f3,f2,f1)(2), 12 )

Test.assertEquals(chained(f4,f5,f6)("lorem ipsum"), "merol_muspi")

image.png waht? 怎么会只通过一个,原来是顺序反了,题目要求是从右到左累计的,所以这里我们就需要用到reduce函数的兄弟函数reduceRight了,关于两者的区别,reduce是从左到右处理(从第一个成员到最后一个成员),reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

最终代码:

function chained(...funcs) {
    if (funcs.length === 0) {
       return arg => arg
    }

    if (funcs.length === 1) {
      return funcs[0]
    }

    return funcs.reduceRight((a, b) => (...args) => a(b(...args)))
}

或者

function chained(...funcs) {
    if (funcs.length === 0) {
       return arg => arg
    }

    if (funcs.length === 1) {
      return funcs[0]
    }

    return funcs.reduce((a, b) => (...args) => b(a(...args)))
}

嗯,完美。

参考: Array.prototype.reduce()

关注下面的标签,发现更多相似的文章

ll

前端工程师
自我介绍 专注web开发,极客教程网(https://www.geekjc.com)-创建者 掌握各种前端开发技能,熟练react nodejs linux

评论

参与评论
loading

正在努力加载中......

推荐阅读:

极客教程网
——一个你值得来的网站
编程笔记:学习分享,与君共勉!
小书本:小小书,大知识!
轮子库:介绍各种库、插件的用途
在线工具:极客工具,在线工具,在线运行
前端导航:前端导航,前端资源聚合平台
微信公众号
极客教程(geekjc)
QQ群:
495489065

Copyright © 2018 - ~ All Rights Reserved. Made By Snow 备案号:粤ICP备15001588号-4