reduce函数详解以及自己实现一个reduce函数

        开篇语： 一直以来都知道数组有一个reduce方法，可是在工作过程中很少用到，对其用法也不是很清晰，今天抽时间好好整理一下，希望加深记忆，以后在工作过程中做到手到擒来，得心应手。

1、概念

首先看一下reduce函数在mdn上的概念：The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. 意思呢就是reduce方法对数组中的每一个元素执行一个自定义函数reducer，将其结果汇总为单个返回值

2、语法

array.reducer(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
function()	必需，用于执行每个元素的函数
total	必需，初始值，也是用于接受计算后的返回值，第一次为首元素，后面依次为function计算后的值
currentValue	必需，当前元素
currentIndex	非必需，当前元素的index
arr	非必需，reduce所操作的数组
initialValue	非必需，传递给函数的初始值

3、示例

先看下面示例：

const numbers = [65, 44, 12, 4];
const result = numbers.reduce(function (total, currentValue, currentIndex, arr) {
    console.log(`total: `, total);
    console.log('currentValue: ', currentValue);
    console.log('currentIndex: ', currentIndex);
    console.log('arr: ', arr);
    return total - currentValue;
}, 200)

console.log('result: ', result) //result: 75

我们来看一下结果：
由上面结果我们可以知道：reduce函数会对每一个元素执行参数function方法，而第一次total值为initialValue的值200，第一次计算200-65，返回135赋值给total，然后下次循环的时候，total的值就是135，依次循环直到最后一个元素计算结束然后返回给result。这里有一点需要注意：initialValue值是可选的，如果不传initialValue，那么total第一次的值为数组的首元素，这个可以自行验证。

4、特殊情况

如果我们对空数组执行reduce方法会怎么样呢？一起测试一下：

const numbers = [];
const result = numbers.reduce(function (total, currentValue, currentIndex, arr) {
    console.log(`total: `, total);
    console.log('currentValue: ', currentValue);
    console.log('currentIndex: ', currentIndex);
    console.log('arr: ', arr);
    return total - currentValue;
})

console.log('result: ', result)// Uncaught TypeError: Reduce of empty array with no initial value

浏览器报错说的很清楚，不可以对空数组在没有initialValue的情况下执行reduce方法，言外之意就是加上initialValue对空数组执行reduce方法就不会报错了，各位同学自行尝试

5、用途

看上面的例子无非就是对数组的各个元素进行计算，好像for循环完全可以胜任，for循环确实可以胜任，不过使用reduce方法写法更加优雅，看一下下面几个高级用法：

1. 数组去重

数组去重的需求我们经常会用到，有了ES6的Set数据结构之后变得很简单，现在我们使用reduce的方法来实现数组去重：

const arr = ['a', 'b', 'c', 'b', 'a'];
const result = arr.reduce(function(prev, currentValue) {
    if (!prev.includes(currentValue)) {
        return [...prev, currentValue];
    } else {
        return prev
    }
}, [])
console.log(result); // ["a", "b", "c"]

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

const arr = ['a', 'b', 'c', 'b', 'a'];
const obj = {};
const result = arr.reduce(function(prev, currentValue) {
    if (!prev.includes(currentValue)) {
        obj[currentValue] = 1;
        return [...prev, currentValue];
    } else {
        obj[currentValue]++;
        return prev
    }
}, [])
Object.entries(obj).forEach(element => {
    console.log(`${element[0]}. 出现的次数为: ${element[1]}`)
});

3. 将二维数组转换为一维数组

const arr = [['a', 'b'], ['c', 'b'], ['a']];
const result = arr.reduce(function(prev, currentValue) {
    return [...prev, ...currentValue]
}, [])
console.log(result); // ["a", "b", "c", "b", "a"]

4. 将多维数组转换为一维数组

const arr = [['a', 'b'], ['c', 'b'], ['a', ['d', 'e']]];
function minusOrder(arr) {
    return arr.reduce(function(prev, currentValue) {
        return [...prev, ...Array.isArray(currentValue) ? 	minusOrder(currentValue) : currentValue];
    }, [])
}
console.log(minusOrder(arr)); // ["a", "b", "c", "b", "a", "d", "e"]

5. 求对象数组中某个属性的所有和

const arr = [
   {
       name: 'xiaoming',
       score: 90
   },
   {
       name: 'zhangsan',
       score: 80
   },
   {
       name: 'xiaohua',
       score: 88
   }
];

var sum = arr.reduce(function(prev, current) {
   return current.score + prev;
}, 0);
console.log(sum) //258

6、如何实现一个reduce函数

实现reduce方法有很多种，下面是自己实现的一种方法，

Array.prototype.mockReduce = function (f, value) {
   let prev;
   if (typeof value === 'undefined') {
       prev = this[0]
       this.slice(1).forEach((element, index, arr) => {
           prev = f(prev,element, index, arr)
       })
       
   } else {
       prev = value;
       this.forEach((element, index, arr) => {
           prev = f(prev, element, index, arr)
       })
   }
   return prev;
}

升级版：

Array.prototype.myReduce = function (f, value) {
  const array = this
  let acc = value || array[0]
  const startIndex = value ? 0 : 1

  for (let i = startIndex; i < array.length; i++) {
    const cur = array[i]
    acc = f(acc, cur, i, array)
  }
  return acc
}

自行比较一下两种实现方式，原理都是一样的