数组常用方法 —— reduce()方法【数组求和，求乘积、计算数组中每个元素出现的次数，数组去重，将二维数组转化为一维，将多维数组转化为一维，对象里的属性求和】

目录

一、reduce()语法

二、实例解析 initialValue 参数 

① 例子1

② 例子2

③ 总结

④ 注意

三、reduce的简单用法

① 数组求和，求乘积

四、reduce的高级用法

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

② 数组去重

③ 将二维数组转化为一维

④ 将多维数组转化为一维

⑤ 对象里的属性求和

---

一、reduce()语法

arr.reduce(callback, [initialValue])

reduce() 方法接收一个函数作为累加器，数组中的每个值开始缩减，最终计算成为一个值。

参数解析：

        ① callback（必需。用于执行每个数组元素的函数，包含四个参数）

previousValue （必需。初始值, 或者计算结束后的返回值。）
currentValue （必需。当前元素）
currentIndex（可选。当前元素的索引）
arr（可选。当前元素所属的数组对象。）

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

二、实例解析 initialValue 参数 

① 例子1

index 是从1开始的，第一次的 prev 的值是数组的第一个值。

数组长度是4，但是reduce函数循环3次。

    const arr = [1,2,3,4]
    const sum = arr.reduce((prev, cur, index, arr) => {
      console.log(prev, cur, index)
      return prev + cur
    })
    console.log(arr, sum)

打印结果： 

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

② 例子2

index 是从0开始的，第一次的 prev 的值是我们设置的初始值0。

数组长度是4，reduce函数循环4次。 

    const arr = [1,2,3,4]
    const sum = arr.reduce((prev, cur, index, arr) => {
      console.log(prev, cur, index)
      return prev + cur
    }, 0) // 这里设置了初始值

    console.log(arr, sum)

打印结果： 

0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

③ 总结

如果没有提供initialValue，reduce 会从索引1的地方开始执行callback方法，跳过第一个索引。如果提供initialValue，从索引0开始。

④ 注意

如果这个数组为空，运用reduce是什么情况？

会报错，"TypeError: Reduce of empty array with no initial value"

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
// 报错，"TypeError: Reduce of empty array with no initial value"

但是要是我们设置了初始值就不会报错，如下：

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)
console.log(arr, sum); // [] 0

所以一般来说我们提供初始值通常更安全！！！

三、reduce的简单用法

① 数组求和，求乘积

    const arr = [1, 2, 3, 4]
    const sum = arr.reduce((x, y) => x + y)
    const mul = arr.reduce((x, y) => x * y)
    console.log('求和，', sum) // 10
    console.log('求乘积，', mul) // 24

四、reduce的高级用法

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

    const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    const nameNum = names.reduce((prev, cur) => {
      console.log(prev, cur)
      // {} "Alice"
      // {Alice: 1} "Bob"
      // {Alice: 1, Bob: 1} "Tiff"
      // {Alice: 1, Bob: 1, Tiff: 1} "Bruce"
      // {Alice: 1, Bob: 1, Tiff: 1, Bruce: 1} "Alice"
      if (cur in prev) {
        prev[cur]++
      } else {
        prev[cur] = 1
      }
      return prev
    }, {})
    console.log(nameNum) // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

② 数组去重

    const arr = [1, 2, 3, 4, 4, 1, 5, 5, 0, 8]
    const arrNew = arr.reduce((prev, cur) => {
      if (!prev.includes(cur)) {
        prev.push(cur)
      }
      return prev
    }, [])
    console.log(arrNew) // [1, 2, 3, 4, 5, 0, 8]

③ 将二维数组转化为一维

    const arr = [[0, 1], [2, 3], [4, 5]]
    const arrNew = arr.reduce((prev, cur) => {
      return prev.concat(cur)
    }, [])
    console.log(arrNew) // [0, 1, 2, 3, 4, 5]

④ 将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

⑤ 对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) // 60