compose()合并函数核心:每次的返回值是一个函数,函数返回值作为下一个数组项函数的参数。
讲redux之前首先要理解一个函数-----reduce()
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数说明:
一、function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
二、initialValue 可选。传递给函数的初始值
reduce()函数有两种用法,一般我们只用到了第一种,即累加(这里不再举例)
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
还有一种比较高级的用法:
reduce() 可以作为一个高阶函数,用于函数的 compose。
注:意思就是写个函数 能将多个函数进行组合成一个函数,就是一元链式函数
注意: reduce() 对于空数组是不会执行回调函数的。
例子:这里想到了数组的reduce()函数
实现思路:要想实现一个这样的函数,肯定是需要有一个遍历的过程,一个函数的执行结果是另一个函数的参数,那这样就需要有个累计的过程,综合以上2点,想到数组中有个reduce函数。这里我们来看看reduce函数
接下来实现:chained函数
function chained(funcs) {
return function(input){
return funcs.reduce(function(input, fn){ return fn(input) }, input);
}
}
chained([f3,f2,f1])(2) //调用
函数解析:分为以下4个步骤解析
chained函数入参:funcs 函数数组 返回值:入参为input的函数(这里称为链式回调函数)
链式回调函数:入参:input 初始值 返回值:reduce()函数 funcs 函数数组 执行reduce()函数
reduce函数:入参:计算函数和初始值
计算函数:function(input, fn){ return fn(input) }
首次入参:input输入值 fancs数组的第一个元素 fn1
二次入参:fn1(input)执行后返回值 fancs数组的第一个元素 fn1
...以此类推,知道fancs的数组元素全部参与执行
抽象理解:reduce 英文意思:减少;缩小
A.reduce(function(total, currentValue, currentIndex, arr), initialValue) 可以理解为逐渐减少数组A的元素,减少执行该过程是传给回调函数,用作新的入参,而减少后变为回调函数的另一个入参(即total返回值)
数组A元素变化示意图:元素 ====> 入参 ====>返回值 ====> 入参 ====>……====>最终合成结果
——————————————————————————————————————————————————————
compose函数:
基本语法:compose(fn1,fn2,fn3,fn4,...)
接收参数为函数,函数用逗号隔开,
返回值为:
function(){
fn1(参数) //这里的参数为执行fn2返回的结果
//特别注意:fn2的入参f3的返回结果,依次类推
}
reduce函数执行:
reduce第一个入参:
function(a, b){
return function(...args){
return a(b(...args))
}
}
第一次: a: fn1 b:fn2
第二次:a为上一次的返回值
a: function(){
return fn1(fn2(...args)) //args是f3(...args)的返回结果
}
b: fn3
第三次:a为第二次函数返回结果
a: function(){
return fn1(fn2(...args))
}(fn3(...args)) //args是f4(...args)的返回结果
b: f4
第四次:a为第三次函数返回结果
a: function(){
return function(){
return fn1(fn2(...args))
}(fn3(...args))
}(fn4(...args))
函数源码参见:https://github.com/reduxjs/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) => b(a(...args))) //从左到右
}
将上面的写法转换为es5:
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) => b(a(...args)))
//下面函数是返回的compose函数
return funcs.reduce(
//下面返回函数是reduce的回调函数 接收 入参 a, b
//a为fn1 ,b为fn2(没有传入初始值)
function(a,b){
//下面返回函数是reduce的回调函数实际执行函数
return function(...args){ //这里...args指的是compose函数传入的参数
var transferVal = a(...args)
return b(transferVal)
}
}
)
}
chained([f3,f2,f1])(2) //调用
执行过程说明:
我们一步一步分解一下, funcs 初始化的值为 funcs = [fn1,fn2,fn3], reduce执行
第一步时
a = fn1
b = fn2
...args = 2
b(a(2)) = fn2(fn1(2))
(2) => b(a(2)) = (2) = > fn2(fn1(2))
第二步时
a = (2) = > fn2(fn1(2)) // 避免和后面混淆,rest参数名修改为 ag
b = fn3
b(a(...args)) = fn3( a(...args) ) = fn3(fn2( fn1(...args) )) // 这一步是关键,a(...args)执行后作为b函数的入参,也就是 ...ag = fn3(...args)
(...args) => b(a(...args)) = (...args) = > fn3(fn2(fn1(...args)))
所以最后返回的就是这样的一个函数 (...args) = > fn3(fn2(fn1(...args)))
reduce()合并函数核心:每次的返回值是一个函数,再用该函数去执行下一个数组元素(数组元素先执行传入参数返回)
说明:这里是从左到右
从右到左写为 funcs.reduce((a, b) => (...args) => a(b(...args)))