数组对象去重

目录

方法一：双层for循环

方法二：indexOf()

方法三：对象访问属性的方法

方法四：Map()

方法五：reduce给数组对象去重

先看看数组对象的形式:

let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];

下面是我想要得到的结果，就是把id的值一样的对象删掉

方法一：双层for循环

两两比较，如果后一个对象的id值和前一个对象的id值相等，就把后面的对象删除

let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
function fn1(tempArr) {
    for (let i = 0; i < tempArr.length; i++) {
        for (let j = i + 1; j < tempArr.length; j++) {
            if (tempArr[i].id == tempArr[j].id) {
                tempArr.splice(j, 1);
                j--;
            };
        };
    };
    return tempArr;
};
console.log(fn1(arrObj));

方法二：indexOf()

定义一个数组存储id的值,然后逐个比较,把id值重复的对象删除即可

let arrObj = [
{ name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
function fn2(tempArr) {
    let newArr = [];
    for (let i = 0; i < tempArr.length; i++) {
        if (newArr.indexOf(tempArr[i].id) == -1) {
            newArr.push(tempArr[i].id);
        } else {
            tempArr.splice(i, 1);
            i--  // 由于splice去除了一个对象，导致后面的元素都向前移动了，此时要是i不变的话会导致后一个元素被跳过，在splice操作之后应该立即i--才能避免这个问题
        };
    };
    return tempArr;
};
console.log(fn2(arrObj));

方法三：对象访问属性的方法

采用对象访问属性的方法，判断属性值是否存在

let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
function fn3(tempArr) {
    let result = [];
    let obj = {};
    for (let i = 0; i < tempArr.length; i++) {
        if (!obj[tempArr[i].id]) {
            result.push(tempArr[i]);
            obj[tempArr[i].id] = true;
        };
    };
    return result;
};
console.log(fn3(arrObj));

方法四：Map()

has方法可以判断Map对象中是否存在指定元素,有则返回true，否则返回false

set方法可以向Map对象添加新元素 map.set(key, value)

values方法可以返回Map对象值的遍历器对象

let arrObj = [
    { name: "小红", id: 1 },
    { name: "小橙", id: 1 },
    { name: "小黄", id: 4 },
    { name: "小绿", id: 3 },
    { name: "小青", id: 1 },
    { name: "小蓝", id: 4 }
];
let map = new Map();
for (let item of arrObj) {
       //如果用if判断，就以第一个值为准；否则重复的值以最后一个为准；
    if (!map.has(item.id)) {
        map.set(item.id, item);
    };
};
arr = [...map.values()];
console.log(arr);

---

方法五：reduce给数组对象去重

has方法可以判断Map对象中是否存在指定元素,有则返回true，否则返回false

set方法可以向Map对象添加新元素 map.set(key, value)

values方法可以返回Map对象值的遍历器对象

array.reduce(function(previousValue , currentValue, index, array ), initialValue)

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
 
    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）
 
initialValue （作为第一次调用 callback 的第一个参数。）

代码：

let arr = [
	{ id: 1, name: 'Tom' },
	{ id: 2, name: 'Jack' },
	{ id: 3, name: 'Lily' },
	{ id: 1, name: 'Tom' },
	{ id: 3, name: 'Lily' },
]
 
function unique(arr) {
	let obj = {} // 用来存放已经出现过的id
	return arr.reduce((pre, cur) => {
		if(!obj[cur.id]) { // obj没有cur的id则放入数组
			obj[cur.id] = true 
			return [...pre, cur]
		} else {
			return pre
		}
	}, [])
}
 
console.log(unique(arr))

结果：

 箭头函数代码可以再精简下

let arr = [
	{ id: 1, name: 'Tom' },
	{ id: 2, name: 'Jack' },
	{ id: 3, name: 'Lily' },
	{ id: 1, name: 'Tom' },
	{ id: 3, name: 'Lily' },
]
 
function unique(arr) {
	let obj = {}
	return arr.reduce((pre, cur) => obj[cur.id] ? pre : obj[cur.id] = true && [...pre, cur], [])
}
 
console.log(unique(arr)) //

参考链接1：数组对象去重的四种方式(强推最后一种！！！)_不甜呐的博客-CSDN博客

参考链接2：使用reduce给数组对象去重_reduce数组对象去重_laishaojiang的博客-CSDN博客