ES6之数组reduce()方法详解及使用场景

一、语法说明

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。接收2个参数，第一个参数为callback回调函数，第二个参数为初始值initialValue。

arr.reduce(callback(previousValue, currentValue, index, array),[initialValue])

callback接受四个参数，分别为：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。以下为参数说明:

1. previousValue：必需参数。初始值 或者 上一次调用回调时返回的累积值。(详见initialValue)

2. currentValue：必需参数。数组中正在处理的元素。

3. currentIndex可选：可选参数。数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。

4. array可选：可选参数。调用reduce()的原数组

注意：callback回调函数里面一定要有return，return的返回值为callback下一次调用时第一个参数（previousValue）的值

 initialValue参数说明:

        1、可选参数

        2、如果提供initialValue，reduce 会从索引0的地方开始执行 callback 方法，且initialValue作为第一次调用 callback函数时的第一个参数的值。

// 提供初始值
let arr = [1,2,3,4,5];
arr.reduce((pre, cur, index) => {
    console.log('index:' + index + ', pre：' + pre + ', cur:' + cur);
    return pre + cur;
}, 0)
// 返回值
// index:0, pre：0, cur:1
// index:1, pre：1, cur:2
// index:2, pre：3, cur:3
// index:3, pre：6, cur:4
// index:4, pre：10, cur:5
// 15

        3、如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过索引0，且索引0对应的值作为第一次调用 callback函数时的第一个参数的值。

// 未提供初始值
let arr = [1,2,3,4,5];
arr.reduce((pre, cur, index) => {
    console.log('index:' + index + ', pre：' + pre + ', cur:' + cur);
    return pre + cur;
})
// 返回值
// index:1, pre：1, cur:2
// index:2, pre：3, cur:3
// index:3, pre：6, cur:4
// index:4, pre：10, cur:5
// 15

 注意：通常来说，给initialValue设置个初始值是最安全的。不设置initialValue时，当调用reduce的数组为空的话会报错，因为拿不到数组的第一个元素作为callback函数的起始值，但是设置了initialValue的初始值就可以避免这个问题 

// 未提供初始值
let arr = [];
let 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"

// 提供初始值
let arr = [];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)
console.log(arr, sum); // [] 0

二、用法举例

1、数组求和、求乘积

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

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

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

 3、数组去重

let arr = [1,2,3,4,4,1];
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }},[])
console.log(newArr);// [1, 2, 3, 4]

4、数组降维 

 （1）二维数组转一维数组

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

（2）多维数组转一维数组 

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]

 5、对象里的属性求和

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

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

6、 获取数组内所有的value值 

const dataArr = [
      {
        value: 'zhinan',
        label: '指南',
        children: [
          {
            value: 'shejiyuanze',
            label: '设计原则',
            children: [
              {
                value: 'yizhi',
                label: '一致'
              },
              {
                value: 'fankui',
                label: '反馈'
              }
            ]
          },
          {
            value: 'daohang',
            label: '导航',
            children: [
              {
                value: 'cexiangdaohang',
                label: '侧向导航'
              },
              {
                value: 'dingbudaohang',
                label: '顶部导航'
              }
            ]
          }
        ]
      }
    ];

    const getValueList = (arr) => {
      return arr.reduce((pre, cur) => {
        if (cur.children) {
          pre.push(cur.value)
          pre.push(...getValueList(cur.children))
        } else {
          pre.push(cur.value)
        }
        return pre
      }, [])
    };
    console.log(getValueList(dataArr)); // ['zhinan', 'shejiyuanze', 'yizhi', 'fankui', 'daohang', 'cexiangdaohang', 'dingbudaohang']