JS的內(nèi)建函數(shù)reduce

mrcode 發(fā)布于2019-08-19 17:43 / 1352人閱讀

摘要：函數(shù)，是規(guī)范中出現(xiàn)的數(shù)組方法。所有的一切通過一個(gè)函數(shù)來管理流程和傳遞初始參數(shù)。上面就是函數(shù)的實(shí)現(xiàn)，它需要對(duì)象作為參數(shù)，并返回一個(gè)類型的函數(shù)，作為的第一個(gè)參數(shù)。在該函數(shù)內(nèi)部，則執(zhí)行多維的疊加工作。

@(js)

reduce函數(shù)，是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時(shí)的工作中，相信大家使用的場(chǎng)景并不多，一般而言，可以通過reduce方法實(shí)現(xiàn)的邏輯都可以通過forEach方法來變相的實(shí)現(xiàn)，雖然不清楚瀏覽器的js引擎是如何在C＋＋層面實(shí)現(xiàn)這兩個(gè)方法，但是可以肯定的是reduce方法肯定也存在數(shù)組的遍歷，在具體實(shí)現(xiàn)細(xì)節(jié)上是否針對(duì)數(shù)組項(xiàng)的操作和存儲(chǔ)做了什么優(yōu)化，則不得而知。

[TOC]

數(shù)組的reduce方法的應(yīng)用

reduce方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)callback，用于針對(duì)數(shù)組項(xiàng)的操作；第二個(gè)參數(shù)則是傳入的初始值，這個(gè)初始值用于單個(gè)數(shù)組項(xiàng)的操作。需要注意的是，reduce方法返回值并不是數(shù)組，而是形如初始值的經(jīng)過疊加處理后的操作。

reduce方法最常見的場(chǎng)景就是疊加。

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };

// do the job
var total = items.reduce(reducer, 0);

console.log(total); // 1130

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

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

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) {
  sumSoFar.sum = sumSoFar.sum + item;
  return sumSoFar;
};

// do the job
var total = items.reduce(reducer, {sum: 0});

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

多重疊加

使用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ù)多帶帶進(jìn)行疊加并完成reduce操作。所有的一切通過一個(gè)manager函數(shù)來管理流程和傳遞初始參數(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類型的函數(shù)，作為reduce的第一個(gè)參數(shù)。在該函數(shù)內(nèi)部，則執(zhí)行多維的疊加工作（Object.keys（））。

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

var reducers = {  
  totalInEuros : function(state, item) {
    return state.euros += item.price * 0.897424392;
  },
  totalInYen : function(state, item) {
    return state.yens += item.price * 113.852;
  }
};

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 = {euros:0, yens: 0};

var items = [{price: 10}, {price: 120}, {price: 1000}];

var totals = items.reduce(bigTotalPriceReducer, initialState);

console.log(totals);