分享6个对象数组去重的方法

这篇具有很好参考价值的文章主要介绍了分享6个对象数组去重的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

对象数组去重,javascript,前端,开发语言,ecmascript

大家好,关于对象数组去重的业务场景,想必大家都遇到过类似的需求吧,针对这样的需求,你是怎么做的呢。

下面我就先和大家讨论下基于对象的某个属性如何去重。

方法一:使用 .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)

结束

其他几个方法的改造,欢迎大家作为练习进行尝试,这里就不再一一举例了,今天的分享就到这里,这些方法都可以实现对象数组的去重,具体使用哪种方法取决于个人的喜好和项目的需求,如果你有其他的方法,欢迎大家在评论区补充,感谢你的关注。文章来源地址https://www.toymoban.com/news/detail-570487.html

到了这里,关于分享6个对象数组去重的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java8 列表通过 stream流 根据对象属性去重的三种实现方法

    0、User对象 1、使用filter进行去重 测试 ①、疑惑 既然 filter 里面调用的是 distinctPredicate 方法,而该方法每次都 new 一个新的 map 对象,那么 map 就是新的,怎么能做到可以过滤呢 ②、解惑 先看一下 filter 的部分实现逻辑,他使用了函数式接口 Predicate ,每次调用filter时,会使用

    2024年01月20日
    浏览(108)
  • 【面试题】如何实现数组去重的?有几种方式?

     前端面试题库 ( 面试必备)              推荐:★★★★★ 地址:前端面试题库 【国庆头像】- 国庆爱国 程序员头像!总有一款适合你! 通过两层循环对数组元素进行逐一比较,然后通过splice方法来删除重复的元素。此 方法对NaN是无法进行去重的 ,因为进行比较时

    2024年02月10日
    浏览(39)
  • JavaScript数组去重,大小排序的两种方法

    方法有很多种,本文列举其中两种 声明一个数组 数组去重 1:利用ES6中的 Set 方法去重(最常用) 原理: Set数据结构中所有元素都是唯一的,没有重复 Set 本身是一个构造函数,用来生成 Set 数据结构 2:利用indexOf去重 原理: indexof() 可返回某个指定的字符串值在字符串中首

    2024年02月06日
    浏览(44)
  • 【linux】linux去重的方法

    多种linux文本去重方法 awk去重法【1】 awk去重法【2】 awk去重法【3】 sort去重法【1】 sort去重法【2】 (用于多个文件一次性去重) sort去重法【3】 (查找非重复行) sort去重法【4】 (统计字符出现次数) grep去重法【1】 grep去重法【2】

    2024年02月11日
    浏览(45)
  • List去重的几种方法

    现在设有Integer类型的ArrayList,list=[0,1,1,3,3,4,5] 1.使用contains 2.使用TreeSet/HashSet/LinkedHashSet 3.Stream流 4.使用迭代器Iterator 5.list中的remove方法

    2024年02月05日
    浏览(60)
  • List 去重的 6 种方法,这个方法最完美!

    在日常的业务开发中,偶尔会遇到需要将 List 集合中的重复数据去除掉的场景。这个时候可能有同学会问:为什么不直接使用 Set 或者 LinkedHashSet 呢?这样不就没有重复数据的问题了嘛? ​ 不得不说,能提这个问题的同学很机智,一眼就看到了问题的本质。 ​ 但是,在实际

    2024年02月03日
    浏览(54)
  • Python列表去重的几种方法和实例

    Python列表去重的几种方法和实例 在 Python 中,列表去重有多种方法,下面分别介绍这些方法的实现。 set() 函数可以将列表转换成集合,集合中不允许有重复的元素,因此可以实现列表去重。 可以使用列表推导式,将列表中不重复的元素生成一个新的列表。 通过字典的键唯一

    2024年02月06日
    浏览(46)
  • Vue中v-if与v-for同时使用的影响和JavaScript中含对象的数组去重

    响应性和性能: v-for 指令会根据数组的每个元素创建和销毁对应的DOM元素,而 v-if 指令会根据条件来插入或移除元素。当 v-if 和 v-for 同时应用于同一个元素时,可能会影响Vue的响应性和性能。 循环内条件:当在 v-for 循环内使用 v-if 条件时,条件将针对每个循环项进行评估。

    2024年02月11日
    浏览(42)
  • 数组去重,对象去重,数组对象去重

    let srcArray = [1, 2, 3, 4, 1, 2, 3, 4] 1.  双层循环 + splice 注: splice删除了一个元素,下标要减一,否则循环会漏掉一个元素(多个相邻的元素 可能会漏掉删除元素) for(let i=0;isrcArray.length - 1;i++){     for(let  j = i+1;jsrcArray.length;j++){         if(srcArray[i]  === srcArray[j] ){            

    2023年04月25日
    浏览(34)
  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包