JS 数组中 reduce 方法详解

一、reduce 方法

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
也就是说，这个累加器会从第一个累加值开始，不断对累加值和数组中的后续元素调用该累加器，直到数组中的最后一个元素，最后返回得到的累加值。

1、语法

array.reduce(callback, initialValue)

2、参数说明

reduce 参数

reduce 参数说明

callback(total, currentValue, index, arr)

必需。用于执行每个数组元素的累加器函数。
函数参数:

累加器参数	累加器参数说明
total	必需。初始值, 或者计算结束后的返回值。
currentValue	必需。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。

initialValue

可选。传递给函数的初始值

3、应用

① 简单示例

var items = [10, 100, 1000];

// 累加器函数
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };

var total = items.reduce(reducer, 1);

console.log(total); // 1111

可以看出，reduce 函数根据初始值 1，不断的进行叠加，完成最简单的总和的实现

② 返回对象

reduce 函数的返回结果类型和传入的初始值相同，上个实例中初始值为 number 类型，同理，初始值也可为 object 类型

var items = [10, 100, 1000];

// 累加器函数
var reducer = function add(sumSoFar, item) {
  sumSoFar.sum = sumSoFar.sum + item;
  return sumSoFar;
};

var total = items.reduce(reducer, { sum: 1 });

console.log(total); // {sum: 1111}

③ 多维度的数据叠加

使用 reduce 方法可以完成多维度的数据叠加
如上例中的初始值 {sum: 0}，这仅仅是一个维度的操作，如果涉及到了多个属性的叠加，如 {sum: 0,totalInEuros: 0,totalInYen: 0}，则需要相应的逻辑进行处理

在下面的方法中，采用分而治之的方法，即将 reduce 函数第一个参数 callback 封装为一个数组，由数组中的每一个函数单独进行叠加并完成 reduce 操作。所有的一切通过一个 manager 函数来管理流程和传递初始参数。

var manageReducers = function (reducers) {
  return function (state, item) {
    return Object.keys(reducers).reduce(
      function (nextState, key) {
        reducers[key](state, item);
        return state;
      },
      {}
    );
  }
};

上面就是 manager 函数的实现，它需要 reducers 对象作为参数，并返回一个 callback 类型的函数，作为 reduce 的第一个参数。在该函数内部，则执行多维的叠加工作（Object.keys（））

通过这种分治的思想，可以完成目标对象多个属性的同时叠加，完整代码如下：

var reducers = {
  totalInEuros: function (state, item) {
    return state.x += item.num * 1;
  },
  totalInYen: function (state, item) {
    return state.y += item.num * 2;
  }
};

var manageReducers = function (reducers) {
  return function (state, item) {
    return Object.keys(reducers).reduce(
      function (nextState, key) {
        reducers[key](state, item);
        return state;
      },
      {}
    );
  }
};

var bigTotalPriceReducer = manageReducers(reducers);
var initialState = {
  x: 1,
  y: 1
};
var items = [
  {
    num: 10
  },
  {
    num: 100
  },
  {
    num: 1000
  }
];
var totals = items.reduce(bigTotalPriceReducer, initialState);

console.log(totals);  // {x: 1111, y: 2221}

③ 场景应用

某同学的期末成绩如下表示

var result = [
  {
    subject: 'chinese',
    score: 85
  },
  {
    subject: 'math',
    score: 95
  },
  {
    subject: 'english',
    score: 90
  }
];

如何求该同学的总成绩？

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

假设该同学因为违纪被处罚在总成绩总扣 10 分，只需要将初始值设置为 -10 即可：

var sum = result.reduce(function (prev, cur) {
  return cur.score + prev;
}, -10);

我们来给这个例子增加一点难度
假如该同学的总成绩中，各科所占的比重不同，分别为 50%，30%，20%，我们应该如何求出最终的权重结果呢？

解决方案如下：

var dis = {
  math: 0.5,
  chinese: 0.3,
  english: 0.2
}

var sum = result.reduce(function (prev, cur) {
  return cur.score + prev;
}, -10);

var qsum = result.reduce(function (prev, cur) {
  return cur.score * dis[cur.subject] + pre;
}, 0)

console.log(sum, qsum);