reduce方法详解总结

1.reduce方法介绍：

reduce语法：arr.reduce(callback,[initialValue])
callback函数可接受四个参数：

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

记得callback内部的结果一定要return 出去，结果才能被接收

---

例子:

1、数组求和（一）

let arr = [1, 2, 3, 4];
let sum = arr.reduce((pre,cur,index,arr)=>{
    return pre + cur;
});

打印一下每次的pre、cur、index来看下计算的过程

pre	cur	pre+cur	index
1	2	1+2 = 3	1
3	3	3+3 = 6	2
6	4	6+4 = 10	3

• 可看出每次的pre是上次调用函数的返回值，即上次计算的和，作为下次调用的第一个参数值。
• reduce方法没有设置可选参数 initialValue，所以index从1开始。第一次的pre的值也是数组的第一个值。
• 可看出求和本应遍历4次，但是却遍历了三次，由此可能是遍历复杂度稍微减少一点。

2、数组求和（二）

let arr = [1, 2, 3, 4];
let sum = arr.reduce((pre,cur,index,arr)=>{
    return pre + cur;
},0);

设置了initialValue，第一次回调的初始值，相当于给pre赋初值，再来看打印的状况

pre	cur	pre+cur	index
0	1	0+1 = 1	0
1	2	1+2 = 3	1
3	3	3+3 = 6	2
6	4	6+4 = 10	3

• 同样的，上次的函数结果是下次计算的pre值，但是不同的是，因为设置了第一次回调函数的值为0，所以index也从0开始，总共遍历4次。

由此可见，initialValue的设置，会改变执行的index开始值，以及每次的pre值，但是执行的结果不变。

3.数组去重

let arr = [1,3,4,2,6,3,7];
let resArr = arr.reduce((pre,cur)=>{
    console.log(pre);
    if(!pre.includes(cur)){
        return pre.concat(cur);   concat方法，会返回一个新的副本数组
    }
    else{
      return pre;
    }
},[])
console.log(resArr);//[1,3,4,2,6,7]

4.统计数组元素出现次数

let objArr = ['one','two','three','four','one','four'];
let resObj = objArr.reduce((pre,cur)=>{
   if(cur in pre){  //已存在
       pre[cur]++;
   }
   else{   //不存在
     pre[cur] = 1;
   }
   console.log(pre);
   return pre;
},{})
console.log(resObj); //{one: 2, two: 1, three: 1, four: 2}

• 打印pre 看其执行过程：
  {one: 1}
  {one: 1, two: 1}
  {one: 1, two: 1, three: 1}
  {one: 1, two: 1, three: 1, four: 1}
  {one: 2, two: 1, three: 1, four: 1}
  {one: 2, two: 1, three: 1, four: 2}

5.二维数组转换成一维

let arr = [1,[2,3],4,5,[7,8]];
let resArr = arr.reduce((pre,cur) =>{
    console.log(pre);
    return pre.concat(cur);
},[])
console.log(resArr); //[1, 2, 3, 4, 5, 7, 8]

• 打印pre看其执行过程：(其实很简单)
  []
  [1]
  [1, 2, 3]
  [1, 2, 3, 4]
  [1, 2, 3, 4, 5]
  [1, 2, 3, 4, 5, 7, 8]

总结：上面这些例子，都是规定了pre的初始值，利用了pre 是前一次回调函数的返回值的特性，去进行操作。

---

上面这些，就算比较常接触的数组一些操作，用reduce也是非常的方便了。
看到有篇博客，讲的很不错，就学习总结一下https://www.jianshu.com/p/e375ba1cfc47
虽然是假期，但是还是要学习，基础很重要！