JavaScript：数组对象去重的几种方法

数组对象去重

元素是对象类型的数组的去重我这粗分为两类，一类是当数组中整个元素一样时的去重（这里说的一样是指元素对象中的属性和值都一样），第二类是，元素对象中的某一个属性的值一样时进行去重

// 通用数组对象
let array = [
    { name: "a", id: 1, age: 21 },
    { name: "a", id: 1, age: 21 },
    { name: "a", id: 1, age: 21 },
    { name: "a", id: 1, age: 21 },
    { name: "b", id: 2, age: 23 },
    { name: "c", id: 3, age: 21 },
    { name: "d", id: 4, age: 22 },
    { name: "e", id: 5, age: 28 },
    { name: "f", id: 6, age: 21 },
    { name: "g", id: 7, age: 22 },
]

第一类：去重完全一样的元素

方式一：数组转JSON，再利用includes()方法进行判断

function removeSame1(array) {
    let newArray = []
    console.log(typeof(JSON.stringify(array)));
    for (let item of array) {
    	// 使用JSON.stringfy()方法将数组和数组元素转换为JSON字符串之后再使用includes()方法进行判断
        if (JSON.stringify(newArray).includes(JSON.stringify(item))) {
            continue
        } else {
        	// 不存在的添加到数组中
            newArray.push(item)
        }
    }
    return newArray
}
console.log(removeSame1(array));
// 结果：
[
  { name: 'a', id: 1, age: 21 },
  { name: 'b', id: 2, age: 23 },
  { name: 'c', id: 3, age: 21 },
  { name: 'd', id: 4, age: 22 },
  { name: 'e', id: 5, age: 28 },
  { name: 'f', id: 6, age: 21 },
  { name: 'g', id: 7, age: 22 }
]

方式二：使用对象不能存储同名属性的原理+JSON

function fun(arr) {
    let newArr = []
    let obj = {}
	
    for (let item of arr) {
    	// 由于对象只能接受字符串或者symbol类型数据作为属性名，所以要转一下
        let str = JSON.stringify(item)
        if (!obj[str]) {
            newArr.push(item)
            obj[str] = true
        }
    }
    return newArr
}

方式三：map+JSON

function fun(arr) {
    let map = new Map()
    let newArr = []
    for (let item of arr) {
        let str = JSON.stringify(item)
        if (!map.has(str)) {
            map.set(str, true)
        }
    }
    
    map.forEach((value, key, map) => {
        newArr.push(JSON.parse(key))
    })
    return newArr
}

第二类：利用元素中属性取值一样进行去重

方式一：利用map不存储键一样的元素

function removeSame1(arr){
    let map = new Map()
    for(let item of arr){
    	// map.has()方法判断map中是否存在这个键
    	// 不存在，则将键和值同时设置到map集合中，
        if(!map.has(item.id)){
            map.set(item.id,item)
        }
    }
    // 返回map的值
    return [...map.values()]
}

console.log(removeSame1(array));

优化

函数的参数传入对象中的一个属性，按传进来的属性进行去重

/**
 * @description: 对象数组去重
 * @param arr 要去重的数组
 * @param key 根据某一个属性去重
 * @return 去重后的数组
 */
function removeSame(arr, prop) {
    let map = new Map()
    for (let item of arr) {
        // map.has()方法判断map中是否存在这个键
        // 不存在，则将键和值同时设置到map集合中，
        if (!map.has(item[prop])) {
            map.set(item[prop], item)
        }
    }

    // 返回map的值
    return [...map.values()]
}

简化：

function removeSame(arr, prop) {
  const map = new Map();
  return arr.filter((obj) => !map.has(obj[prop]) && map.set(obj[prop], true));
}

方式二：利用对象的键必须唯一的特性

function removeSame2(arr,prop){
    var obj = {} //定义一个空对象obj
    var newArr = [] //定义一个空数组
    for(var elemOfArr of arr){
        // 利用对象的键唯一特性进行去重
        if(!obj[elemOfArr[prop]]){
          newArr.push(elemOfArr);
          obj[elemOfArr[prop]] = true; // 给键赋值
        }
    }
    return newArr;
}

console.log(removeSame2(array));

方式三：双重for循环结合splice()方法

function removeSame3(arr){
    var len = arr.length;
    for(var i = 0; i<len; i++){
        for(var j = i+1; j<len; j++){
            if(arr[i].id == arr[j].id){
                arr.splice(j,1); 
                len--;
                j--; //删除重复值的时候len改变了，所以j也要改变
            }
        }
    }
    return arr;
}
console.log(removeSame3(array)); 

方法四：双重for循环+boolean类型判断重复

function removeSame5(arr,prop){
    var newArr = [arr[0]];
    for(var i = 1; i<arr.length; i++){
        var isRepeat = false;
        for(var j = 0; j<newArr.length; j++){
            if(arr[i][prop] === newArr[j][prop]){
                isRepeat = true;
                break;
            }
        }
        if(!isRepeat){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

console.log(removeSame5(array));

方式五：reduce()方法

function removeSame5(arr,prop) {
    let newArr = [];  // 去重后得到的新数组
    const obj = {};  //  中间值 转换数据
    newArr = arr.reduce(function (pre, cur) {
        obj[cur[prop]] ? '' : (obj[cur[prop]] = true && pre.push(cur));
        return pre;
    }, []);
    return newArr;
}


console.log(removeSame5(array,'id'));