Javascript中transducer的应用

本文假定你对下列知识有一定了解

函数式编程
高阶函数
柯里化
ES6语法

需求背景

假定有一数组，

const testArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

要筛选出所有大于3的元素，然后再加1，组成新的数组[5, 6, 7, 8, 9, 10].
用命令式编程很容易实现：

// 算法1
let result = [];
testArray.forEach(x => {if (greaterThanThree(x)) {result.push(increaseOne(x));}
});
console.log(result);

用函数式编程，最简单的方式是这样：

// 算法2
const result = testArray.filter(greaterThanThree).map(increaseOne);
console.log(result);

看似代码少了很多，但是效率却下降了。算法1的时间复杂度是O(n), 算法2的时间复杂度是O(2*n).
对于这种情况，如何用函数式编程实现O(n)的算法？
首先，filter和map都可以用reduce来实现，算法2可以转化为如下代码：

// 算法3
const greaterThanThree = x => x > 3;
const filterReducer = (acc, element) => {return greaterThanThree(element) ? acc.concat(element) : acc;
};const increaseOne = x => x + 1;
const mapReducer = (acc, element) => {return acc.concat(increaseOne(element));
};
let result = restArray.reduce(filterReducer, []).reduce(mapReducer, []);
console.log(result);

于是，思路是将filterReducer和mapReducer组装成一个Reducer，作为参数传给restArray.reduce。

第一步

将函数greaterThanThree和increaseOne作为参数提出来，于是filterReducer和mapReducer转化为：

const filterReducer = (acc, element, predicate) => {return predicate(element) ? acc.concat(element) : acc;
};const mapReducer = (acc, element, transform) => {return acc.concat(transform(element));
};

但是，因为需要先组装filterReducer和mapReducer，再传给reduce，所以参数是分开传入的。并且acc和element是在执行reduce时最后传入，所以需要柯里化：

const filterReducer = predicate => (acc, element) => {return predicate(element) ? acc.concat(element) : acc;
};const mapReducer = transform => (acc, element) => {return acc.concat(transform(element));
};

第二步

进一步抽象。filterReducer和mapReducer都有concat。如果要把他们组装成一个Reducer，必须只有一个concat，所以concat也要当参数传入。目前是调用数组concat方法，为了能参数化，必须重写：

const concat = (acc, element) => acc.concat(element);

然后，就可以参数化concat：

const filterReducer = predicate => concatReducer => (acc, element) => {return predicate(element) ? concatReducer(acc, element) : acc;
};const mapReducer = transform => concatReducer => (acc, element) => {return concatReducer(acc, transform(element));
};

至此，filterReducer和mapReducer就转化为了transducer。

第三步

引入compose：

var compose = (f, g) => x => {return f(g(x));
};

由于需求是先筛选后转化（加1），所以思路是将mapReducer作为concatReducer传入filterReducer：

const newReducer = compose(filterReducer(greaterThanThree), mapReducer(increaseOne));

上文说过，必须只有一个concat，所以concat在组装后再传入：

const result  = testArray.reduce(newReducer(concat), []);

完整代码

// 算法4
var compose = (f, g) => x => f(g(x))；const greaterThanThree = x => x > 3;
const increaseOne = x => x + 1;
const concat = (acc, element) => acc.concat(element);
const filterReducer = predicate => concatReducer => (acc, element) => {return predicate(element) ? concatReducer(acc, element) : acc;
};const mapReducer = transform => concatReducer => (acc, element) => {return concatReducer(acc, transform(element));
};const newReducer = compose(filterReducer(greaterThanThree), mapReducer(increaseOne));
const result  = testArray.reduce(newReducer(concat), []);
console.log(result);

如何理解newReducer(concat)

newReducer(concat)等价于

compose(filterReducer(greaterThanThree), mapReducer(increaseOne))(concat)

代入compose等价于

filterReducer(greaterThanThree)(mapReducer(increaseOne)(concat))

代入filterReducer等价于

(acc, element) => {return greaterThanThree(element) ? mapReducer(increaseOne)(concat)(acc, element) : acc;
};

代入mapReducer等价于

(acc, element) => {return greaterThanThree(element) ? ((acc, element) => {return concat(acc, increaseOne(element));})(acc, element) : acc;
};

等价于

(acc, element) => {return greaterThanThree(element) ? concat(acc, increaseOne(element)) : acc;
};

到这里，也许你会恍然大悟。如果不考虑各种扩展重用，只是要快点解决这个性能问题，但又要守住函数式编程的底线，你只需要直接用这个reducer即可。