数组方法---reduce

当我们需要遍历一个数组时 —— 我们可以使用 forEach，for 或 for..of。

当我们需要遍历并返回每个元素的数据时 —— 我们可以使用 map。

arr.reduce 方法和和上面的种类差不多，但稍微复杂一点。它们用于根据数组计算单个值。

语法 

array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)

 

该函数一个接一个地应用于所有数组元素，并将其结果“搬运（carry on）”到下一个调用。 

参数：

• accumulator —— 是上一个函数调用的结果，第一次等于 initial（如果提供了 initial 的话）。
• item —— 当前的数组元素。
• index —— 当前索引。
• arr —— 数组本身。

应用函数时，上一个函数调用的结果将作为第一个参数传递给下一个函数。

因此，第一个参数本质上是累加器，用于存储所有先前执行的组合结果。最后，它成为 reduce 的结果。

听起来复杂吗？

掌握这个知识点的最简单的方法就是通过示例。

在这里，我们通过一行代码得到一个数组的总和：

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

 

传递给 reduce 的函数仅使用了 2 个参数，通常这就足够了。

让我们看看细节，到底发生了什么。

1. 在第一次运行时，sum 的值为初始值 initial（reduce 的最后一个参数），等于 0，current 是第一个数组元素，等于 1。所以函数运行的结果是 1。
2. 在第二次运行时，sum = 1，我们将第二个数组元素（2）与其相加并返回。
3. 在第三次运行中，sum = 3，我们继续把下一个元素与其相加，以此类推……

在这里，我们可以清楚地看到上一个调用的结果如何成为下一个调用的第一个参数。

我们也可以省略初始值：

let arr = [1, 2, 3, 4, 5];

// 删除 reduce 的初始值（没有 0）
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

 

结果是一样的。这是因为如果没有初始值，那么 reduce 会将数组的第一个元素作为初始值，并从第二个元素开始迭代。

计算表与上面相同，只是去掉第一行。

但是这种使用需要非常小心。如果数组为空，那么在没有初始值的情况下调用 reduce 会导致错误。

let arr = [];

// Error: Reduce of empty array with no initial value
// 如果初始值存在，则 reduce 将为空 arr 返回它（即这个初始值）。
arr.reduce((sum, current) => sum + current);

所以建议始终指定初始值。

 

常见用法:

累加对象里的值

let sum = [{x: 2}, {x:3}, {x:5}].reduce(
    (acc, curValue) => acc + curValue.x
    ,0
);
 
console.log(sum) // 10

 二维数组变一维

  <script>
    
var arr = [[0, 1], [2, 3], [4, 5]].reduce(( acc, cur ) => acc.concat(cur),[]);
console.log(arr); // [0,1,2,3,4,5]

    </script>

 计算数组中每个元素出现的次数

 

 <script>
        var arr = ['A','B','C','D','A']
       let obj = arr.reduce((acc,curvalue)=>{
            if(curvalue in acc) {
                acc[curvalue]++
            }else {
                acc[curvalue] = 1
            }
            return acc
        },{})
        console.log(obj);
    </script>