成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS進(jìn)階篇--JS數(shù)組reduce()方法詳解及高級(jí)技巧

jerryloveemily / 626人閱讀

摘要:基本概念方法接收一個(gè)函數(shù)作為累加器,數(shù)組中的每個(gè)值從左到右開始縮減,最終為一個(gè)值。例進(jìn)階應(yīng)用使用方法可以完成多維度的數(shù)據(jù)疊加。在該函數(shù)內(nèi)部,則執(zhí)行多維的疊加工作。參考的內(nèi)建函數(shù)數(shù)組方法的高級(jí)技巧

基本概念 reduce() 方法接收一個(gè)函數(shù)作為累加器(accumulator),數(shù)組中的每個(gè)值(從左到右)開始縮減,最終為一個(gè)值。

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

語法:

arr.reduce(callback,[initialValue])

callback (執(zhí)行數(shù)組中每個(gè)值的函數(shù),包含四個(gè)參數(shù))

previousValue (上一次調(diào)用回調(diào)返回的值,或者是提供的初始值(initialValue))

currentValue (數(shù)組中當(dāng)前被處理的元素)

index (當(dāng)前元素在數(shù)組中的索引)

array (調(diào)用 reduce 的數(shù)組)

initialValue (作為第一次調(diào)用 callback 的第一個(gè)參數(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)行疊加,完成最簡單的總和的實(shí)現(xiàn)。

reduce函數(shù)的返回結(jié)果類型和傳入的初始值相同,上個(gè)實(shí)例中初始值為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},這僅僅是一個(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);

在來一個(gè)例子:
某同學(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é)因?yàn)檫`紀(jì)被處罰在總成績總扣10分,只需要將初始值設(shè)置為-10即可。

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

我們來給這個(gè)例子增加一點(diǎn)難度。假如該同學(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);

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

var arrString = "abcdaabc";

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

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

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

koa的源碼中,有一個(gè)only模塊,整個(gè)模塊就一個(gè)簡單的返回reduce方法操作的對(duì)象:

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;
  }, {});
};

通過對(duì)reduce概念的理解,這個(gè)模塊主要是想新建并返回一個(gè)obj對(duì)象中存在的keys的object對(duì)象。

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

JS的內(nèi)建函數(shù)reduce
數(shù)組reduce方法的高級(jí)技巧

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/87346.html

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0
  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風(fēng)荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源;定時(shí)更新,歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0
  • 前端文檔收集

    摘要:系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<