由对象构成的数组去重总结

最新推荐文章于 2022-07-26 10:09:31 发布

柠檬可乐@

最新推荐文章于 2022-07-26 10:09:31 发布

阅读量245

点赞数 1

分类专栏：前端开发经验文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_45393981/article/details/101316569

版权

前端开发经验专栏收录该内容

12 篇文章

订阅专栏

在项目中遇到localStorage数组嵌套对象去重问题，分享两种解决方案：1) 使用reduce()方法，通过对象hash标记避免重复；2) 采用for循环遍历并比较删除重复id的项，封装为函数方便调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目时遇到了在localStorage里存了数组嵌套对象的数据需要去重的问题。找到了以下的解决方法，就分享一下：

原数组data的格式，现需要根据id将重复的数据删除：

let data = [
    { id: 000001, name: '张三',  },
    { id: 000002, name: 'John',  },
    { id: 000003, name: '李四',  },
    { id: 000001, name: '张三',  },
    { id: 000004, name: 'Jack', },
    { id: 000005, name: '王五',  },
    { id: 000004, name: 'Jack', },
    { id: 000002, name: 'John',  },
    { id: 000004, name: 'Jack',  },
];

1、使用数组的reduce()方法

let hash = {}; 
data = data.reduce((preVal, curVal) => {
	hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal); 
	return preVal 
}, [])
console.log(data)

输出结果：
在这里插入图片描述
reduce()方法接收一个函数作为累积器，数组中的每个值从左到右开始合并，最后返回一个值。

实现原理：
利用reduce()方法的累积器作用，在对由对象组成的数组进行遍历时，通过对象hash来标记数组中每个元素id是否出现过，如果出现过，那么遍历到的当前元素则不会放入到累积器中，如果没有出现，则添加到累积器中，这样保证了最后返回值中每个数据id的唯一性。

2、for循环遍历

function removeRepeat(arr, key){
	for(let i = 0; i < arr.length; i++) {
		for(let j = i+1; j < arr.length; j++) {
			if(arr[i][key] === arr[j][key]){
				arr.splice(j, 1);
				j = j-1;  // 关键，因为splice()删除元素之后，会使得数组长度减小，此时如果没有j=j-1的话，会导致相同id项在重复两次以上之后无法进行去重，且会错误删除id没有重复的项。
			}
		}
	}
}
removeRepeat(data, 'id');

输出结果自然和上边的结果一致：
在这里插入图片描述
实现原理：
利用for循环遍历数组，并将数组中的每一个元素与剩余元素一一进行比较，如果在剩余元素中出现id相同的项，则通过splice()方法将相同id项删除，这样在最终得到的数组中每个数据id将是唯一的。通过splice()方法删除元素后，会使得数组长度减小，为了实现去重应该执行j = j-1。上面将去重方法直接封装成函数removeRepeat，使用时可以直接调用该函数，并传入要去重的数组和唯一属性名。