欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解JS數(shù)組Reduce()方法詳解及高級技巧

 更新時間：2017年08月18日 16:56:29   作者：風(fēng)雨后見彩虹  
reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素。接下來通過本文給大家分享JS數(shù)組Reduce()方法詳解及高級技巧，一起看看吧

基本概念

reduce() 方法接收一個函數(shù)作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始縮減，最終為一個值。

reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當(dāng)前元素值，當(dāng)前索引，調(diào)用 reduce 的數(shù)組。

語法:

arr.reduce(callback,[initialValue])
  • callback （執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)）
  • previousValue （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
  • currentValue （數(shù)組中當(dāng)前被處理的元素）
  • index （當(dāng)前元素在數(shù)組中的索引）
  • array （調(diào)用 reduce 的數(shù)組）
  • initialValue （作為第一次調(diào)用 callback 的第一個參數(shù)。）

簡單應(yīng)用

例1：

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)行疊加，完成最簡單的總和的實現(xiàn)。

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

例2：

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}

進(jìn)階應(yīng)用

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

在下面的方法中，采用分而治之的方法，即將reduce函數(shù)第一個參數(shù)callback封裝為一個數(shù)組，由數(shù)組中的每一個函數(shù)單獨進(jìn)行疊加并完成reduce操作。所有的一切通過一個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ù)的實現(xiàn)，它需要reducers對象作為參數(shù)，并返回一個callback類型的函數(shù)，作為reduce的第一個參數(shù)。在該函數(shù)內(nèi)部，則執(zhí)行多維的疊加工作（Object.keys（））。

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

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

在來一個例子：

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

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

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

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

假設(shè)該同學(xué)因為違紀(jì)被處罰在總成績總扣10分，只需要將初始值設(shè)置為-10即可。

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

我們來給這個例子增加一點難度。假如該同學(xué)的總成績中，各科所占的比重不同，分別為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);

再看一個例子，如何知道一串字符串中每個字母出現(xiàn)的次數(shù)？

var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
  res[cur] ? res[cur] ++ : res[cur] = 1
  return res;
}, {})

由于可以通過第二參數(shù)設(shè)置疊加結(jié)果的類型初始值，因此這個時候reduce就不再僅僅只是做一個加法了，我們可以靈活的運用它來進(jìn)行各種各樣的類型轉(zhuǎn)換，比如將數(shù)組按照一定規(guī)則轉(zhuǎn)換為對象，也可以將一種形式的數(shù)組轉(zhuǎn)換為另一種形式的數(shù)組，大家可以動手去嘗試一樣。

[1, 2].reduce(function(res, cur) { 
  res.push(cur + 1); 
  return res; 
}, [])

koa的源碼中，有一個only模塊，整個模塊就一個簡單的返回reduce方法操作的對象：

var only = function(obj, keys){
 obj = obj || {};
 if ('string' == typeof keys) keys = keys.split(/ +/);
 return keys.reduce(function(ret, key){
  if (null == obj[key]) return ret;
  ret[key] = obj[key];
  return ret;
 }, {});
};

通過對reduce概念的理解，這個模塊主要是想新建并返回一個obj對象中存在的keys的object對象。

var a = {
  env : 'development',
  proxy : false,
  subdomainOffset : 2
}
only(a,['env','proxy'])  // {env:'development',proxy : false}

總結(jié)

以上所述是小編給大家介紹的詳解JS數(shù)組Reduce()方法詳解及高級技巧，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論