js复杂数组去重

最新推荐文章于 2024-10-20 15:12:29 发布

原创最新推荐文章于 2024-10-20 15:12:29 发布 · 834 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

文章介绍了三种在JavaScript中去除对象数组重复元素的方法：1)使用Set数据结构结合map进行转换和去重；2)利用reduce方法检查累加器中是否存在相同id的对象；3)结合filter和findIndex方法保留索引匹配的对象。

1.使用Set数据结构

const arr = [
	{id: 1, name: 'Alice'}, 
	{id: 2, name: 'Bob'}, 
	{id: 1, name: 'Alice'}
];
const uniqueArr = [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
console.log(uniqueArr); 
// [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]

该方法使用map方法将每个对象转换为字符串，使用Set数据结构进行去重，最后使用map方法将字符串转换为对象。

2.使用reduce方法

const arr = [
	{id: 1, name: 'Alice'}, 
	{id: 2, name: 'Bob'}, 
	{id: 1, name: 'Alice'}
];
const uniqueArr = arr.reduce((acc, cur) => {
  const isExist = acc.find(item => item.id === cur.id);
  if (!isExist) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(uniqueArr); 
// [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]

该方法使用reduce方法对数组进行遍历，如果某个对象的id属性不存在于累加器数组中，则将其添加到累加器数组中。

3.使用filter和findIndex方法

const arr = [
	{id: 1, name: 'Alice'}, 
	{id: 2, name: 'Bob'}, 
	{id: 1, name: 'Alice'}
];
const uniqueArr = arr.filter((item, index) => {
  return arr.findIndex(obj => obj.id === item.id) === index;
});
console.log(uniqueArr); 
// [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]