一、reduce 方法

reduce() 方法接收一個(gè)函數(shù)作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減，最終為一個(gè)值。
也就是說(shuō)，這個(gè)累加器會(huì)從第一個(gè)累加值開(kāi)始，不斷對(duì)累加值和數(shù)組中的后續(xù)元素調(diào)用該累加器，直到數(shù)組中的最后一個(gè)元素，最后返回得到的累加值。

1、語(yǔ)法

array.reduce(callback, initialValue)

2、參數(shù)說(shuō)明

reduce 參數(shù)	reduce 參數(shù)說(shuō)明
callback(total, currentValue, index, arr)	必需。用于執(zhí)行每個(gè)數(shù)組元素的累加器函數(shù)。 函數(shù)參數(shù): 累加器參數(shù) 累加器參數(shù)說(shuō)明 total 必需。初始值, 或者計(jì)算結(jié)束后的返回值。 currentValue 必需。當(dāng)前元素 currentIndex 可選。當(dāng)前元素的索引 arr 可選。當(dāng)前元素所屬的數(shù)組對(duì)象。
initialValue	可選。傳遞給函數(shù)的初始值

3、應(yīng)用

① 簡(jiǎn)單示例

var items = [10, 100, 1000];

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

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

console.log(total); // 1111

可以看出，reduce 函數(shù)根據(jù)初始值 1，不斷的進(jìn)行疊加，完成最簡(jiǎn)單的總和的實(shí)現(xiàn)

② 返回對(duì)象

reduce 函數(shù)的返回結(jié)果類(lèi)型和傳入的初始值相同，上個(gè)實(shí)例中初始值為 number 類(lèi)型，同理，初始值也可為 object 類(lèi)型

var items = [10, 100, 1000];

// 累加器函數(shù)
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}

③ 多維度的數(shù)據(jù)疊加

使用 reduce 方法可以完成多維度的數(shù)據(jù)疊加
如上例中的初始值 {sum: 0}，這僅僅是一個(gè)維度的操作，如果涉及到了多個(gè)屬性的疊加，如 {sum: 0,totalInEuros: 0,totalInYen: 0}，則需要相應(yīng)的邏輯進(jìn)行處理

在下面的方法中，采用分而治之的方法，即將 reduce 函數(shù)第一個(gè)參數(shù) callback 封裝為一個(gè)數(shù)組，由數(shù)組中的每一個(gè)函數(shù)單獨(dú)進(jìn)行疊加并完成 reduce 操作。所有的一切通過(guò)一個(gè) manager 函數(shù)來(lái)管理流程和傳遞初始參數(shù)。

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

上面就是 manager 函數(shù)的實(shí)現(xiàn)，它需要 reducers 對(duì)象作為參數(shù)，并返回一個(gè) callback 類(lèi)型的函數(shù)，作為 reduce 的第一個(gè)參數(shù)。在該函數(shù)內(nèi)部，則執(zhí)行多維的疊加工作（Object.keys（））

通過(guò)這種分治的思想，可以完成目標(biāo)對(duì)象多個(gè)屬性的同時(shí)疊加，完整代碼如下：

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}

③ 場(chǎng)景應(yīng)用

某同學(xué)的期末成績(jī)?nèi)缦卤硎?/p>

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

如何求該同學(xué)的總成績(jī)？

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

假設(shè)該同學(xué)因?yàn)檫`紀(jì)被處罰在總成績(jī)總扣 10 分，只需要將初始值設(shè)置為 -10 即可：

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

我們來(lái)給這個(gè)例子增加一點(diǎn)難度
假如該同學(xué)的總成績(jī)中，各科所占的比重不同，分別為 50%，30%，20%，我們應(yīng)該如何求出最終的權(quán)重結(jié)果呢？

解決方案如下：

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);

總結(jié)

以上是生活随笔為你收集整理的JS 数组中 reduce 方法详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。