首頁  >  文章  >  web前端  >  Javascript中內建函數reduce的應用詳解

Javascript中內建函數reduce的應用詳解

高洛峰
高洛峰原創
2016-12-09 14:59:411317瀏覽

前言

一般而言,可以透過reduce方法實現的邏輯都可以透過forEach方法來變相的實現,雖然不清楚瀏覽器的js引擎是如何在C++層面實現這兩個方法,但是可以肯定的是reduce方法肯定也存在數組的遍歷,在具體實作細節上是否針對數組項的操作和儲存做了什麼優化,則不得而知。

數組的reduce方法的應用

reduce方法有兩個參數,第一個參數是一個callback,用於針對數組項的操作;第二個參數則是傳入的初始值,這個初始值用於單一數組項的操作。要注意的是,reduce方法傳回值並不是數組,而是形如初始值的經過疊加處理後的運算。

reduce方法最常見的場景就是疊加。

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函數根據初始值0,不斷的進行疊加,完成最簡單的總和的實現。

前文也提到,reduce函數的回傳結果類型和傳入的初始值相同,上個實例中初始值為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方法可以完成多維度的資料疊加。如上例中的初始值{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.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);

   


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn