JS中6个对象数组去重的方法
前言
大家好，关于对象数组去重的业务场景，想必大家都遇到过类似的需求吧，针对这样的需求，你是怎么做的呢。
下面我就先和大家讨论下基于对象的某个属性如何去重。
方法一：使用 .filter() 和 .findIndex() 相结合的方法
使用 filter() 方法过滤掉重复的元素，使用 findIndex() 方法判断对象是否重复，代码如下：
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "c"}, {id: 3, name: "d"}];
const uniqueArr = arr.filter((item, index) =>
arr.findIndex(i => i.id === item.id) === index);方法二：使用 .reduce() 方法
使用 reduce() 方法维护一个累加器，通过对象的属性来判断是否重复，代码如下：
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "c"}, {id: 3, name: "d"}];
const uniqueArr = arr.reduce((acc, curr) => {
if (!acc.find(item => item.id === curr.id)) {
acc.push(curr);
}
return acc;
}, []);方法三：使用 .forEach() 和 .some() 相结合的方法
使用 forEach() 方法遍历数组，使用 some() 方法判断是否重复，代码如下：
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "c"}, {id: 3, name: "d"}];
const uniqueArr = [];
arr.forEach(item => {
if (!uniqueArr.some(i => i.id === item.id)) {
uniqueArr.push(item);
}
});方法四：使用 Map
使用 Map 结构去重对象数组时，需要借助 array.map() 函数将对象数组进行转换，示例代码如下：
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "c"}, {id: 3, name: "d"}];
const uniqueArr = [...new Map(arr.map(item => [item.id, item])).values()];方法五：Object.create()
使用Object.create()，按照对象的属性来判断是否重复，代码如下
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "c"}, {id: 3, name: "d"}];
const uniqueArr = arr.filter(function (item) {
return !this[item.id] && (this[item.id] = true);
}, Object.create(null));方法六：For const of 和 find 结合
这个方法的思想与方法3类似 ，其思路结构如下：
- 创建一个空的唯一数组来存储唯一对象。
- 循环遍历数组中的对象。对于每个对象，如果它不是重复的，则将其添加到唯一数组。否则，忽略它
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "c"}, {id: 3, name: "d"}];
const unique = [];
for (const item of arr) {
const isDuplicate = unique.find((obj) => obj.id === item.id);
if (!isDuplicate) {
unique.push(item);
}
}针对多个属性进行去重
有时候，您可能希望仅当对象具有两个或多个具有相同值的属性时才将其视为重复对象——多个属性值相同。
对于这种情况，我们可以将上述方法进行稍微调整就可以进行使用，有部分方法可能不适用,有哪些不合适，这个问题留给大家，欢迎大家在评论区讨论。
我们先使用 .filter() 和 .findIndex() 相结合的方法尝试下，看看如何操作：
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "a"}, {id: 3, name: "d"}];
const uniqueArr = arr.filter((item, index) =>
arr.findIndex(i => i.id === item.id
&& i.name === item.name) === index);我们再使用 For const of 和 find 结合的方法，也能实现同样的效果
const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},
{id: 1, name: "a"}, {id: 3, name: "d"}];
const unique = [];
for (const item of arr) {
const isDuplicate = unique.find((obj) =>
obj.id === item.id && obj.name ==item.name);
if (!isDuplicate) {
unique.push(item);
}
}
console.log(unique)结束
其他几个方法的改造，欢迎大家作为练习进行尝试，这里就不再一一举例了，今天的分享就到这里，这些方法都可以实现对象数组的去重，具体使用哪种方法取决于个人的喜好和项目的需求，如果你有其他的方法，欢迎大家在评论区补充，感谢你的关注。
到此这篇关于JS中6个对象数组去重的方法的文章就介绍到这了,更多相关JS对象数组去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了json格式判断函数速记示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了javascript排序函数实现数字排序的相关资料,附上示例，需要的朋友可以参考下2015-06-06
本文通过实例代码给大家讲解了使用javascript函数编写简单银行取钱存钱流程，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。本文就带大家彻底学会JavaScript手写防抖节流，需要的可以参考一下2022-11-11
全面解析Bootstrap中scrollspy（滚动监听）的使用方法
这篇文章主要为大家全面解析Bootstrap中scrollspy（滚动侦听）的使用方法，感兴趣的小伙伴们可以参考一下2016-06-06
本篇我们用同样的原理，把文字用CLIP属性分的更细，分别着色，然后组合到一起，实现自左到右更精确的色彩渐变。问题是文字细化分割需要用到很多很多个元素，所以这里我们要用程序来控制，自动生成这些元素。2008-11-11
情人节将至 程序员证明自己不是直男的时候到啦 我们也有自己的专属代码浪漫。本文将介绍七个利用JavaScript实现的情人节表白特效，需要的可以参考一下2022-01-01
本文主要介绍了uniapp中修改打包路径,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
这篇文章主要介绍了微信小程序利用for循环解决内容变更问题 ，本文分步骤通过实例代码详解给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
Bootstrap是Twitter推出的一个开源的前端框架。这篇文章主要介绍了Web前端框架bootstrap实战,需要的朋友可以参考下2016-12-12
最新评论