reduce的用法

概念

数组的一个方法，使用reduce可以针对数组处理很多比较复杂、抽象的操作，更简化逻辑，一步到位。

语法

• array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)；
• 1.accumulator 必需。初始值, 或者计算结束后的返回值。
• 2.currentValue 必需。当前元素
• 3.currentIndex 可选。当前元素的索引
• 4.array可选。当前元素所属的数组对象。
• 5.initialValue 可选。传递给函数的初始值
• 注意：
• 1.对于空数组不会执行回调函数

用法如下：

1. 累加器

let numbers = [1, 2, 0, 0];
const getSum = (total, num) => {
    return total + num;
}; 
let sum = numbers.reduce(getSum);
console.log(sum); // 3

2. 计算元素出现的次数

let arr = ['liming', 'liming', 'xiaohong'];
let reData = arr.reduce((pre, cur) => {
    if (cur in pre) {
        pre[cur]++;
    } else {
        pre[cur] = 1;
    }
    return pre;
}, {});
console.log(reData); //=>{liming:2,xiaohong:1}

3. 高阶函数（函数的compose）

把f3(f2(f1(6))) 改成chained([f1, f2, f3])(6)

const f1 = (x) => {
    return x * 2;
};

const f2 = (x) => {
    return x + 4;
};

const f3 = (x) => {
    return x - 4;
};
//这样是可以实现，但是代码看起来有点笨重，所以可以使用reduce来优化一下
console.log(f3(f2(f1(6))));

const chained = (arr) => {
    return (num) => {
        return arr.reduce((pre, fn) => {
            return fn(pre);
        }, num);
    };
};
// chained返回一个函数，接收一个参数，内部计算得到的值依次传递
console.log(chained([f1, f2, f3])(6)); // 从左到右依次处理，f1接收参数6处理后得到的值传递给f2，接着得到的值传给f3

4. 合并多维数组

let arr_ex = [
    [0, 1],
    [2, 3],
    [4, 5]
];
let arr_merge = arr_ex.reduce(function (pre, cur) {
    return pre.concat(cur);
}, []);
console.log(arr_merge); // [0,1,2,3,4,5]

5. 数组对象分组

let people = [
    {name: 'Alice', age: 21},
    {name: 'Max', age: 20},
    {name: 'Jane', age: 20}
];

function groupBy(objectArray, property) {
    return objectArray.reduce(function (acc, obj) {
        let key = obj[property];
        if (!acc[key]) {
            acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
    }, {});
}

let groupedPeople = groupBy(people, 'age');
console.log(groupedPeople); //{
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

6. 数组去重

let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
    if (accumulator.indexOf(currentValue) === -1) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.log(myOrderedArray); //[a,b,c,e,d]

目前经常用到的就是上述几种，如果多个异步操作彼此依赖结果数据，链式调用，也是可以使用reduce进行处理的。