参考文章：JS数组reduce()方法详解及高级技巧 25个数组reduce高级用法

语法

  1. arr.reduce(callback,[initialValue])

reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接收四个参数：初始值（或者上一次回调函数的返回值），当前元素，当前索引，调用reduce的数组。

  1. callback （执行数组中每个值的函数，包含四个参数）
  3.     1、previousValue （初始值是initialValue，后面就是上一次调用回调return返回的值）
  4.     2、currentValue （数组中当前被处理的元素）
  5.     3、index （当前元素currentValue在数组中的索引）
  6.     4、array （当前元素currentValue所属的数组）
  8. initialValue （作为第一次调用 callback 的第一个参数。）

还可以有另一种理解：
reduce参数：

  • callback: 回调函数

  • initValue: 初始值

    回调函数的参数：

  • total: 累计器完成计算的返回值

  • value: 当前元素的值
  • index: 当前元素的索引
  • array: 当前元素所属的数组对象

回调函数的过程（reduce函数中其实是隐藏着循环便利的，他会从数组第一个元素开始循环遍历）

  • 以total作为累计结果的初始值（开始会把initValue赋值给t）,如果不给值则以数组第一个元素为初始值，value从第二个元素开始。
  • 开始遍历，使用累计器处理v，将v的映射结果累计到t上，结束此次循环，返回t
  • 进入下一次循环，重复上述操作，直至数组最后一个元素
  • 结束遍历，返回最终的t

简单用法

最简单的就是我们常用的数组求和，求乘积

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

高级用法

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

  1. let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
  3. let nameNum = names.reduce((pre,cur)=>{
  4.   if(cur in pre){
  5.     pre[cur]++
  6.   }else{
  7.     pre[cur] = 1 
  8.   }
  9.   return pre
  10. },{})
  11. console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

将二维数组转化为一维数组

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

对象里的属性求和

  1. var result = [
  2.     {
  3.         subject: 'math',
  4.         score: 10
  5.     },
  6.     {
  7.         subject: 'chinese',
  8.         score: 20
  9.     },
  10.     {
  11.         subject: 'english',
  12.         score: 30
  13.     }
  14. ];
  16. var sum = result.reduce(function(prev, cur) {
  17.     return cur.score + prev;
  18. }, 0);
  19. console.log(sum) //60

记录数组中元素的索引

查找元素arr中值为val的，并将其装入新的数组里

  1. function Position(arr = [], val) { // 记录数组元素的索引
  2.     return arr.reduce((t, v, i) => (v === val && t.push(i),t), []);
  3. }
  4. const reduceB = [2, 1, 5, 4, 2, 1, 6, 6, 7];
  5. Position(reduceB, 2); // [0, 4]

注意：(v === val && t.push(i), t) 中涉及逗号表达式，就是执行完左边操作，返回逗号右边的值；是如下写法的简写；

  1. v === val && t.push(i);
  2. return t;