js reduce累加器

​

reduce 是es6 新增的数组操作方法 意为累加器

使用方法如下

[1,1,1,1].reduce((total,currentValue,index)=>{
 
},initialValue)

　　

initialValue 代表的是累加器的初始值 必填

total的值在初始情况下等于initialValue 用来接收返回的结果 必填

currentValue 代表数组中的每一项 必填

index 表示数组下标 可选

下面来看一个例子

 let total = [2,2,2].reduce((pre,current,index)=>{
            console.log(pre,index);
            return pre+current;
 },2)
 console.log(total);//输出8

　　

我们输出total 会发现它等于8 ，这里初始值是2，这就是将初始值与数组中的每一项进行累加的结果 也就是说，它是受初始值的影响，若我们将初始值改变累加器的结果也会不同

 let total = [2,2,2].reduce((pre,current,index)=>{
            console.log(pre,index);
            return pre+current;
 },1)
 console.log(total);//输出7
点击并拖拽以移动

　　

在上面这个例子里 current就等于数组中的每一项，index等于数组的下标，而pre表示的就是默认的初始值，但是这个值并不是一成不变的 每次累加后它的结果都会改变

默认情况下pre等于 2 ，这个值是我们定义的初始值

第一次 return pre+current， 等于4 ，然后将这个4返回给pre 所以这个时候pre不在是2 而是等于4

第二次 return pre+current， 因为在上一轮累加后pre已经等于4，所以这一次累加后pre等于6 了 然后以此类推

直到计算到数组最后一个值时 ，在将结果返回给累加器方法

也就是说 pre的值会随着每次累加而改变

我们可以在累加器里面打印一下pre 就能看出效果

 let total = [2,2,2].reduce((pre,current,index)=>{
            console.log(pre);//分别输出2 4 6
            return pre+current;
 },2)
 console.log(total);//输出8

会分别输出2，4，6，没有输出8，这是因为计算到数组最后一个值时，会直接将结果返回给累加器方法，结束运算

这里需要注意 累加器的初始值不一定要是一个数字 可以是其他任何类型的数据，可以是一个数组，或是一个字符串都行，它不仅仅可以用来累加数值，还很多其他用法，

比如说我们还可以利用累加器的特性来将二维数组转换为一维数组

        let arr = [[1,1,1],[2,2,2],[3,3,3]].reduce((pre,current,index)=>{
            return pre.concat(current);
        },[])
        console.log(arr);

转换后的数组将会是一个一维数组

[1, 1, 1, 2, 2, 2, 3, 3, 3]

注：concat是数组拼接方法 可以将多个数组重新组合为一个新的数组

累加器的功能远不止这些，这里不多做赘述

​