使用ES6的reduce函数，根据key去重

Posted 2021-11-23 daisygogogo

最近很着迷于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