JavaScript 新旧替换五:函数嵌套
目录
引子
看了 Redux 的 applyMiddleware
方法的实现,里面函数嵌套的写法都用了新语法,就想关注一下函数嵌套一类新旧的不同。
上一篇 JavaScript 新旧替换四:继承。
ES5 方式
普通嵌套
function find(value) {
return {
in: function(arr) {
return {
combine: function(obj) {
var result = arr.indexOf(value);
obj.index = result;
return obj;
}
};
}
};
}
var data = find(6).in([1,2,3,4,5,6]).combine({});
console.info(data); // {index: 5}
管道机制
管道机制(pipeline)是指前一个函数的输出是后一个函数的输入。
const plus = a => a + 1;
const minus = a => a - 2;
const multi = a => a * 3;
const div = a => a / 4;
function pipeline() {
for (var len = arguments.length, funcs = [], key = 0; key < len; key++) {
funcs[key] = arguments[key];
}
return function(val) {
var result = funcs.reduce(function(a, b) {
return b(a);
}, val);
return result;
};
}
var cal = pipeline(plus,minus,multi,div);
var result = cal(5);
console.info(result); // 3
ES2015+ 方式
普通嵌套
const find = (value) => (
{
in: (arr) => (
{
combine: (obj) => {
const result = arr.indexOf(value);
obj.index = result;
return obj;
}
}
)
}
);
const data = find2(6).in([1,2,3,4,5,6]).combine({});
console.info(data); // {index: 5}
管道机制
const plus = a => a + 1;
const minus = a => a - 2;
const multi = a => a * 3;
const div = a => a / 4;
const pipeline = (...funcs) => val => funcs.reduce(function(a,b) {
return b(a);
}, val);
const cal = pipeline(plus,minus,multi,div);
const result = cal(5);
console.info(result); // 3