reduce方法应用技巧

定义和用法

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

运行一下


  转载请注明: XMwarrior reduce方法应用技巧

  目录