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