使用ES6的reduce函數，根據key去重

最近很着迷於ES6的函數，讓代碼變得更優雅。ES6裏的reduce函數，平時用的不是特別多，真正用起來發現仍是挺好用的。

想要實現的效果爲：

原數組：

let rawArr = [{id:'123'},{id:'456'},{id:'789'},{id:'123'}];

根據id去重後的結果爲

let rawArr = [{id:'123'},{id:'456'},{id:'789'}];

 

reduce函數介紹

在說如何去重以前，先來介紹一下reduce函數：

array.reduce(callback[, initialValue]);

寫的具體一點，是這樣子

array.reduce(function(total, currentValue, currentIndex, array), initialValue);

reduce方法會遍歷數組，而且爲數組中的每一個元素，執行定義的callback方法，並把結果彙總爲單個值返回。

參數定義

callback：爲每一個元素執行的方法，它有如下四個參數

　　　total：累計器，也是最終返回的結果

　　　currentValue：當前遍歷的元素

　　　currentIndex：當前遍歷的元素的下標，可選

　　　array：原始數組，可選

initialValue：初始值

須要注意的是，若是定義了initialValue，那麼total的初始值就是initialValue，遍歷則從第0項開始。

若是沒有定義，則total的初始值，會是第0項元素，遍歷則從第1項開始。

 

利用reduce函數封裝去重方法

因爲最終但願返回的是一個去重後的數組，因此reduce函數的初始值要設置爲空數組[]，這樣，在遍歷到符合條件的元素的時候，才能push進數組裏。

我封裝了一個util工具方法：入參爲原始數組，以及須要根據哪一個key值去重，返回結果爲最終去重後的數組

function uniqueByKey(arr,key) {
    let hash = {};
    let result = arr.reduce((total, currentValue) => {
        if (!hash[currentValue[key]]) { //若是當前元素的key值沒有在hash對象裏，則可放入最終結果數組
          hash[currentValue[key]]= true; //把當前元素key值添加到hash對象
          total.push(currentValue); //把當前元素放入結果數組
        }
        return total; //返回結果數組
      },[]);
    return result;
}

 

最後，奉上MDN的reduce介紹地址，寫的很是詳細

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce