reduce方法应用技巧

Posted 2020-11-15 xmwarrior

定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
注意: reduce() 对于空数组是不会执行回调函数的。

浏览器支持

方法	Chrome	Edge	Firefox	Safari	Opera
reduce()	Yes	9.0	3.0	4	10.5

语法

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

基本用法

基本的数值运算，例如求和：

var numbers = [65, 44, 12, 4];
numbers.reduce(function(total, currentValue) {
    return total + currentValue;
});

运行一下

进阶应用

数组转换为对象

var arr = [{
    n: "小明",
    a: 18,
    s: "男"
}, {
    n: "小红",
    a: 17,
    s: "女"
}];
arr.reduce(function(total, currentValue, currentIndex) {
    total[currentValue.n] = {
        age: currentValue.a,
        sex: currentValue.s
    };
    return total;
}, {})

运行一下

链式调用

let pipe = (function() {
    return function(value, context) {
        context = context || window;
        let methods = [];
        let oproxy = new Proxy({}, {
            get(target, methodName) {
                if(methodName === 'get') {
                    return methods.reduce((val, fn) => fn(val, context), value);
                } else {
                    methods.push(context[methodName]);
                    return oproxy;
                }
            }
        });
        return oproxy;
    }
})();

let obj = {
    double: val => val * 2,
    pow: val => val * val

}
pipe(4, obj).double.pow.get //64

运行一下

copyright @ xmwarrior