全方面了解数组的reduce（）！

介绍

首先，给各位看官讲解一下reduce（）是干什么的

[1,2,3].reduce(callback,inVal)

1.数组的归并方法，用于遍历数组且进行归并。

2.接受2参数，callback为回调，inlVal为初始值。

注意：当填有初始值时，从初始值开始归并。 当没有初始值时，从数组的第0项开始归并。

3.回调方法里接受2个参数，一个是缓存值pre，一个是当前值cur。每一次运行 reducer时会将先前元素的计算结果作为参数传入也就是pre，最后将其结果汇总为单个返回值。

因为有pre这个缓存值，可以解决非常多的问题，下面就给各位看官上案例。

求和

//求和
const arr = [1, 2, 3];
const sum = arr.reduce((pre, cur) =>{
return  pre + cur
}，0);
console.log(sum, "sum");
//循环前：pre=0
//       cur=undefined
//第一次循环：pre=0
//           cur=1
//           return 1（放到下个pre中）
//以此类推...

找最大值

//找最大值
const arr = [1, 2, 7 , 4];
const max = arr.reduce((pre, cur) => Math.max(pre,cur));
console.log(max, "max");
//当然直接用Es6语法 Math.max(...arr)也是可以的，这里只是提供一种思路

数组去重

//数组去重
  const resultList = [1, 2, 1, 1, 3, 4, 4].reduce((preList, cur) => {
      if (preList.indexOf(cur) === -1) {
        preList.push(cur);
      }
      return preList;
    }, []);
    console.log(resultList, "resultList");
//当然去重也是有许多方法的，还是那句话，这里只是提供一种思路

归类

//归类
    const dataList = [
      {
        name: "a",
        country: "China",
      },
      {
        name: "b",
        country: "China",
      },
      {
        name: "c",
        country: "USA",
      },
      {
        name: "d",
        country: "EN",
      },
    ];

    const resultObj = dataList.reduce((preObj, cur) => {
      const { country } = cur;
      if (!preObj[country]) {
        preObj[country] = [];
      }
      preObj[country].push(cur);
      
      //这里还可以用一句代码完成，vue里响应式原理里用到的——短路表达式
      //(preObj[country] || (preObj[country] = [])).push(cur);
      
      return preObj;
    }, {});
    console.log(resultObj, "resultObj");