数组对象去重的几种方法

news/2024/12/22 20:42:07/

场景:

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


方法一:双层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--;};};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 (!map.has(item.id)) {map.set(item.id, item);};
};
arr = [...map.values()];
console.log(arr);// 方法二: (代码较为简洁)
const map = new Map();
const newArr = arrObj.filter(v => !map.has(v.id) && map.set(v.id, 1));
console.log(newArr);


http://www.ppmy.cn/news/1022195.html

相关文章

SpringBoot整合多数据源

SpringBoot整合多数据源 在实际企业项目开发中&#xff0c;我们经常会在SpringBoot项目中配置多数据源&#xff0c;一方面可以减缓数据库压力&#xff0c;另一方面可以也是业务需求的场景 下面就来看看如何在SpringBoot项目中配置多数据源 POM 在配置多数据源之前&#xff…

设计模式(2)工厂方法模式

一、 1、介绍&#xff1a;定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。简单工厂模式的最大优点在于工厂类中包含了必要的逻辑判断&#xff0c;根据客户端的选择条件动态实例化相关的类&#xff0c;对于客户端来说…

C++学习| MFC简单入门

前言&#xff1a;因为接手了CMFC的程序&#xff0c;所以需要对MFC编程方面有所了解。 C之MFC简单入门 MFC相关的概念MFCWIN32QT MFC项目基本操作MFC项目创建MFC项目文件解读界面和代码数据交互——加法器 MFC相关的概念 MFC MFC&#xff08;Microsoft Foundation Classes微软…

【重温老古董——Strust2框架】基于Idea使用maven创建Strust2项目

1、新建项目 红色圈出的部分是【强制】,其他部分看个人喜好。 2、修改 pom 文件,管理依赖 <dependency><groupId>org.apache.struts</groupId><artifactId>struts2-core</artifactId><version>2.5.22</version></dependency&g…

那些年的Java开发经验记录

Java同步锁(浅显易懂&#xff0c;精简讲解) 详细讲解可以看这篇文章Java对象锁和类锁全面解析&#xff08;多线程synchronized关键字&#xff09; 精简如下&#xff1a; 1.不管什么锁&#xff0c;都是属于对象锁(类也是一种对象) 2.一个对象只有一个锁 3.锁最大可以锁整个…

基于java成人教育教务系统设计与实现

摘要 随着市场经济的产业化结构升级&#xff0c;人才结构也在不断发生这巨大的变化和变革。而且各大企业都在处于一个高速发展和壮大的阶段&#xff0c;在这个高速发展和结构化升级的时期对于人才的需求也在不断的增多。企业和用工单位也不再局限于对高校人才招揽和招聘更多是偏…

汉字形近字(OCR)

近期做中文OCR识别的优化&#xff0c;抓破头皮却收获甚微。 为了百尺竿头更进一步&#xff0c;遂将目光聚焦在中文汉字特有的形近字和生僻字问题上&#xff0c;于是怒发整理形近字大全&#xff08;花了不少刀&#xff09;&#xff0c;希望对同行朋友们也有帮助&#xff1a; 地表…

SLAM框架与相关理论梳理

应该是思维导图的形式使用markmap实现,可以使用md文档在VSCode中添加插件预览,预览图如绑定的那个资源的样式。 效果大概是长这个样子 > 但是CSDN不好用,一堆乱码。这里建议从这个链接中复制下载md文件,使用VSCode的markmap插件查看,或者直接把md的内容复制到markmap网…