JS 对象数组去重的常用方法

0. new Set 的不适用

项目中需要将一个对象数组去重，一般的数组去重可以直接用 new Set() 方法即可，但是对象数组的话，因为每一个元素都是引用类型比较复杂，使用new Set 无法进行去重，代码如下所示：

var arr1 = ["张三","李四","王五","张三"]
var arr2 = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":1,"name":"王五"},{"id":1,"name":"张三"}];
console.log(new Set(arr1));
console.log(new Set(arr2));

结果如下：可以看出，new Set去重对于对象数组并不适用。 

我们可以采取以下三种方法来去重对象数组

注：以下都是根据标识id属性进行去重

1. 常规for循环遍历 

var arr = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"}];
var result = [];
var obj = {};
for(var i =0; i<arr.length; i++){
       if(!obj[arr[i].id]){
          result.push(arr[i]);
          obj[arr[i].id] = true;
       }
    }
console.log(result);

 2. new Map

var arr = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"}];
function unique(arr) {
    // 创建一个Map对象实例
    const res = new Map() 
    // 过滤条件：如果res中没有某个键，就设置这个键的值为1
    return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}

console.log(unique(arr));

注意：键值是多少不重要，主要是利用map结构去重，因为map中的key是唯一的。 

3. reduce

//reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
var arr = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"}];
var obj = {};
arr = arr.reduce(function(item, next) {
       obj[next.id] ? '' : obj[next.id] = true && item.push(next);
       return item;
    }, []);
console.log(arr);