1. 程式人生 > >JS進階篇--JS陣列reduce()方法詳解及高階技巧

JS進階篇--JS陣列reduce()方法詳解及高階技巧

去除巢狀的思路:

用遞迴、reduce()、concat()來實現。

遞迴解決多層巢狀,reduce()解決每層陣列的迭代拼接,concat()來拼接陣列即拆除一層巢狀。

let sum = [0, 1, 2, 3].reduce(function(acc, val) {                //陣列_實現flatten()函式,拆巢狀   return acc + val; }, 0); console.log(sum); // 6 let list1 = [[0, 1], [2, 3], [4, 5]]; let list2 = [0, [1, [2, [3, [4, [5, [6]]]]]]]; const flatten = (arr) => {     return arr.reduce(         (acc, val) => {             return acc.concat(Array.isArray(val) ? flatten(val) : val)         }, []     ); }; c(flatten(list1)); // [0, 1, 2, 3, 4, 5] c(flatten(list2)); // [ 0, 1, 2, 3, 4, 5, 6 ]

陣列去重的思路:

1.建立一個新的陣列存放結果 2.建立一個空物件

3.for迴圈時,每次取出一個元素與物件進行對比,如果這個元素不重複,則把它存放到結果陣列中,同時把這個元素的內容作為物件的一個屬性,並賦值為1,存入到第2步建立的物件中。

說明:至於如何對比,就是每次從原陣列中取出一個元素,然後到物件中去訪問這個屬性,如果能訪問到值,則說明重複。 程式碼如下:

Array.prototype.unique3 = function(){ var res = []; var json = {}; for(var i = 0; i < this.length; i++){ if(!json[this[i]]){ res.push(this[i]); json[this[i]] = 1; } } return res; } var arr = [112,112,34,'你好',112,112,34,'你好','str','str1']; alert(arr.unique3());

更簡短的陣列去重程式碼:

利用filter()和indexOf()方法實現陣列去重:

var arr = [1, 3, 2, 5, 2, 1, 4, 2, 1]; arr = arr.filter(function(item,index,array){     return array.indexOf(item) === index;   }); c(arr);

陣列去除巢狀再去重:

function unite(arr1, arr2, arr3) {                        //陣列拆巢狀再去重     for(var i=1;i<arguments.length;i++)     {         arr1.push(arguments[i]);     }     const flatten = (arr) => {         return arr.reduce(             function(acc,val) {             return acc.concat(Array.isArray(val) ? flatten(val) : val);         },[]);     };     arr1 = flatten(arr1);     // var obj = {};     // var array = [];     function unique(array1){     return array1 = array1.filter(function(item,index,array){     return array1.indexOf(item) === index;   });     }     arr1 = unique(arr1);     return arr1; } c(unite([1, 3, 2], [5, 2, 1, 4], [2, 1])); ---------------------   

基本概念

reduce() 方法接收一個函式作為累加器(accumulator),陣列中的每個值(從左到右)開始縮減,最終為一個值。

reduce 為陣列中的每一個元素依次執行回撥函式,不包括陣列中被刪除或從未被賦值的元素,接受四個引數:初始值(或者上一次回撥函式的返回值),當前元素值,當前索引,呼叫 reduce 的陣列。

語法:

arr.reduce(callback,[initialValue])
  • callback (執行陣列中每個值的函式,包含四個引數)

    • previousValue (上一次呼叫回撥返回的值,或者是提供的初始值(initialValue))
    • currentValue (陣列中當前被處理的元素)
    • index (當前元素在陣列中的索引)
    • array (呼叫 reduce 的陣列)
  • initialValue (作為第一次呼叫 callback 的第一個引數。)

簡單應用

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

reduce函式的返回結果型別和傳入的初始值相同,上個例項中初始值為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}

進階應用

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

在來一個例子: 某同學的期末成績如下表示

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

如何求該同學的總成績?

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

假設該同學因為違紀被處罰在總成績總扣10分,只需要將初始值設定為-10即可。

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

我們來給這個例子增加一點難度。假如該同學的總成績中,各科所佔的比重不同,分別為50%,30%,20%,我們應該如何求出最終的權重結果呢?

解決方案如下:

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

再看一個例子,如何知道一串字串中每個字母出現的次數?

var arrString = 'abcdaabc';

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

由於可以通過第二引數設定疊加結果的型別初始值,因此這個時候reduce就不再僅僅只是做一個加法了,我們可以靈活的運用它來進行各種各樣的型別轉換,比如將陣列按照一定規則轉換為物件,也可以將一種形式的陣列轉換為另一種形式的陣列,大家可以動手去嘗試一樣。

[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}