对象数组去重的多种方法

对象数组去重的多种方法

方法1：使用临时对象

 // 定义一个对象数组
 const items = [{id:1,name:'a'},{id:2,name:'b'},{id:1,name:'a'},{id:3,name:'c'},{id:2,name:'b'}
    ,{id:4,name:'d'},{id:1,name:'a'},{id:3,name:'c'},{id:4,name:'d'},{id:2,name:'b'}];
    
  const items2 = []; //新的数组
  var o = {}; //临时对象
   for(var i=0;i<items.length;i++){
       if(!o[items[i].id]){ // 先看看这个对象中是否已经有了这个属性
           o[items[i].id] = true; // 没有的话就将这个赋值true
           console.log(o)
           items2.push(items[i]); //新的数据追加到数组
       }
   };
   console.log(items2)

// 运行顺序
// 1、o = {}; 数组的第一项，o[items[i].id] ==> o[1] 为undefined，判断条件成立，将o[1]设为true，然后将此时这一项push进新数组中。
// 数组的第二项也一样
// 然后到达数组第三项，o[items[i].id] ==> o[1]为true，if条件不成立，不执行操作。
// 以此类推，便达到了去重的效果

方法2: 使用map的has方法

 const items = [{id:1,name:'a'},{id:2,name:'b'},{id:1,name:'a'},{id:3,name:'c'},{id:2,name:'b'}
    ,{id:4,name:'d'},{id:1,name:'a'},{id:3,name:'c'},{id:4,name:'d'},{id:2,name:'b'}];
    
 const map = new Map();
 for(let v of items){
     if(!map.has(v.id)){ // 判断当前map中是否有这个key值
         map.set(v.id,v.name)
     }
 };
 console.log(map); //Map(4) { 1 => 'a', 2 => 'b', 3 => 'c', 4 => 'd' }
 // map转为数组对象
 console.log([...map]) //[ [ 1, 'a' ], [ 2, 'b' ], [ 3, 'c' ], [ 4, 'd' ] ]
 console.log([...map].map(([k,v])=>({id:k,name:v})))
 // 另一种方式
 const a = Array.from(map,([k,v])=>({id:k,name:v}));
 console.log(a)

// 更简便的写法
 const map = new Map();
 for(let v of items){
     if(!map.has(v.id)){ // 判断当前map中是否有这个key值
         map.set(v.id,v)
     }
 };
 console.log(map); // Map(4) { 1 => {id:1,name:'a'}, 2 => {id:2,name:'b'}, 3 => {id:3,name:'c'}, 4 => {id:4,name:'d'} }
 console.log([...map.values()]) // values()values()方法用于返回一个新的Iterator对象，该对象包含Map中存在的每个元素的值。值的顺序与将其插入Map的顺序相同。并不是一个真正的数组

方法3：使用map配合数组的filter方法

 const items = [{id:1,name:'a'},{id:2,name:'b'},{id:1,name:'a'},{id:3,name:'c'},{id:2,name:'b'}
    ,{id:4,name:'d'},{id:1,name:'a'},{id:3,name:'c'},{id:4,name:'d'},{id:2,name:'b'}];
    
const map = new Map();
const c = items.filter(v=>{
    if(!map.has(v.id)){ // 不符合条件则没有return 则并不会在filter所返回的数组里
        return map.set(v.id,v.name)
    }
});
console.log(c);
//简化
const map = new Map();
console.log(items.filter(v=>!map.has(v.id) && map.set(v.id,v.name)))