js的数组去重方法

news2024/11/25 16:23:58

 

目录

es6数组中对象去重

1. filter()用法

2. findIndex()用法

3. 去重

其他方法:

方法二:reduce()去重

1. reduce()用法

1.1 找出字符长度最长的数组成员。

1.2 扁平化二维数组

1.3 扁平化多维数组

 三、总结方案:

使用Set:ES6引入的Set数据结构可以用于存储唯一的值。通过将数组转换为Set,然后将Set转换回数组,可以实现去重。

使用filter()方法和indexOf()方法:利用Array的filter()方法和indexOf()方法,可以过滤出不重复的元素。

使用reduce()方法和includes()方法:利用Array的reduce()方法和includes()方法,可以遍历数组并累积不重复的元素。

使用Map:利用Map数据结构的特性,可以实现数组的去重。


es6数组中对象去重

1. filter()用法

filter()方法返回一个包含符合指定条件的所有元素的新数组。如果没有符合条件的元素,则返回空数组。

  • 注意: filter() 不会对空数组进行检测。
  • 注意: filter() 不会改变原始数组。
let arr = [
		{id: 1,name: '王五'},
		{id: 2,name: '李赵六'}
	];

let nArr = arr.filter((value, index, Arr) =>{
    console.log(value);
    console.log(index);
    console.log(Arr);
});

打印结果:

{id: 1, name: '王五'}
0
[{id: 1, name: '王五'},{id: 2, name: '李赵六'}]

{id: 2, name: '李赵六'}
1
[{id: 1, name: '王五'},{id: 2, name: '李赵六'}]

2. findIndex()用法

findIndex()方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex()方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1
  •  注意: findIndex() 对于空数组,函数是不会执行的。
  • 注意: findIndex() 并没有改变数组的原始值。

[3, 10, 18, 20].findIndex(value => value>11);  // 2 (18的下标是2)
[3, 10, 18, 20].findIndex(value => value>1);  // 0 (3的下标是0)
[3, 10, 18, 20].findIndex(value => value>30); // -1 (不存在则返回-1) 

3. 去重

let arr = [
		{id: 1,name: '张三'},
		{id: 2,name: '李四'},
		{id: 1,name: '张三'},
		{id: 2,name: '李四'}
	];

let nArr = arr.filter((currentValue, currentIndex, selfArr) = >{
	return selfArr.findIndex(x = >x.name === currentValue.name) === currentIndex
});
console.log(nArr);
[{"id": 1,"name": "张三"},{"id": 2,"name": "李四"}]

其他方法:

var m = new Map();
person = person.filter((ele) => !m.has(ele.id) && m.set(ele.id, ""));

方法二:reduce()去重

1. reduce()用法

reduce方法和reduceRight方法依次处理数组的每个成员,最终累计为一个值。

区别:

reduce是从左到右处理(从第一个成员到最后一个成员),
reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

  • 注意:reduce() 对于空数组是不会执行回调函数的。

语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • total 累积变量,默认为数组的第一个成员
  • currentValue 当前变量,默认为数组的第二个成员
  • currentIndex 当前位置(从0开始)
  • arr 原数组
    这四个参数之中,只有前两个是必须的,后两个则是可选的
// total为最终累计值
let total = [1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
});
// 1 2
// 3 3
// 6 4
// 10 5
// 15

如果要对累积变量指定初值,可以把它放在reduce方法和reduceRight方法的第二个参数。

上面的第二个参数相当于设定了默认值,处理空数组时尤其有用,可避免一些空指针异常。

由于这两个方法会遍历数组,所以实际上还可以用来做一些遍历相关的操作。
比如,

1.1 找出字符长度最长的数组成员。
function findLongest(entries) {
  return entries.reduce(function (longest, entry) {
    return entry.length > longest.length ? entry : longest;
  }, '');
}
 
findLongest(['aaa', 'bb', 'c']) // "aaa"
1.2 扁平化二维数组
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
1.3 扁平化多维数组
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

 三、总结方案:

 在JavaScript和es6中介绍一些常见的方法

使用Set:ES6引入的Set数据结构可以用于存储唯一的值。通过将数组转换为Set,然后将Set转换回数组,可以实现去重。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用filter()方法和indexOf()方法:利用Array的filter()方法和indexOf()方法,可以过滤出不重复的元素。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用reduce()方法和includes()方法:利用Array的reduce()方法和includes()方法,可以遍历数组并累积不重复的元素。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用Map:利用Map数据结构的特性,可以实现数组的去重。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = Array.from(new Map(arr.map(value => [value, value])).values());
console.log(uniqueArr); // [1, 2, 3, 4, 5]

这些方法都可以实现对数组的去重操作。具体选择哪种方法取决于个人偏好和性能需求。在ES6中引入的Set和箭头函数等特性使得数组去重更加简洁和高效。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1260329.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华为的数字化转型(9)——企业架构4A集成模型

企业架构(Enterprise Architecture,EA)是衔接战略与项目实施的桥梁,引入企业架构方法,可以对数字化转型愿景进行系统性的、分层分级的梳理和解释,以便企业上下在同一张蓝图上统一认识。 企业架构提供了整体…

Intel Software Guard Extensions简介

文章目录 前言一、新的基于硬件的控件实现数据安全二、机密计算的挑战三、用于机密计算的增强安全功能四、Enclave验证和数据密封五、数据中心认证参考资料 前言 最近开始研究Intel SGX硬件特性,记录下研究过程。 参考文档:product-brief-SGX 一、新的…

如何与死锁斗争!!!

其他系列文章导航 Java基础合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、死锁场景现场 二、死锁是如何产生的 三、死锁排查思路 四、sql模拟死锁复现 五、死锁的解决方案 前言 为避免影响业务,应尽可能避…

springboot实现数据脱敏

springboot实现数据脱敏 怎么说呢,写着写着发觉 ”这写的什么玩意“ 。 总的来说就是,这篇文章并不能解决数据脱敏问题,但以下链接可以。 SpringBoot中利用自定义注解优雅地实现隐私数据脱敏 然后回到本文,本来是想基于AOP代理&am…

MySQL优化技巧

在使用一些常规的 SQL 时&#xff0c;如果我们通过一些方法和技巧来优化这些 SQL 的实现&#xff0c;在性能上就会比使用常规通用的实现方式更 优化分页查询 通常我们是使用 <LIMIT M,N> 合适的 order by 来实现分页查询&#xff0c;这种实现方式在没有任何索引条件支…

【Java】IDEA 基本操作

0.IDEA 0.1 IDEA中的层级结构 0.1.1 结构分类 project&#xff08;项目、工程&#xff09;module&#xff08;模块&#xff09;package&#xff08;包&#xff09;class&#xff08;类&#xff09; 0.1.2 结构介绍 project&#xff08;项目、工程&#xff09; ​ 淘宝、京…

物联网AI 无线连接学习之WiFi基础篇 802.11协议发展

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 前言 随着物联网行业不断发展&#xff0c;WiFi技术的发展在其中起着非常关键的作用&#xff0c;也是我们日常生活中使用非常广泛的无线网络技术之一&#xff0c;现在我们随便买一个家用电子产品&#xff0c…

java springboot测试类Transactional解决 测试过程中在数据库留下测试数据问题

好 目前 我们已经完成了表现层对应的测试了 但这里有个坑 如果我们在执行某个声明周期时 包含了测试的过程 它会在数据库中留下一条数据 但真实企业开发 绝对不允许 过一遍留一组数据的 那么 我们的期望就是 执行测试过程 但不要留下任何数据 这是我们的数据库表 然后 这里…

华为电视盒子 EC6108V9C 刷机成linux系统

场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 家里装宽带的时候会自带电视盒子&#xff0c;但是由于某些原因电视盒子没有用&#xff0c;于是就只能摆在那里吃土&#xff0c;闲来无事&#xff0c;搞一下 问题描述 提示&#xff1a;这里描述项目中遇到…

zi定义指令

hello&#xff0c;我是小索奇&#xff0c;精心制作的Vue系列持续发放&#xff0c;涵盖大量的经验和示例&#xff0c;如果对您有用&#xff0c;可以点赞收藏哈~ 自定义指令 自定义指令就是自己定义的指令&#xff0c;是对 DOM 元素进行底层操作封装 ,程序化地控制 DOM&#xff…

医院电子病历编辑器源码(支持云端SaaS服务)

电子病历系统基于云端SaaS服务的方式&#xff0c;采用B/S&#xff08;Browser/Server&#xff09;架构提供&#xff0c;采用前后端分离模式开发和部署。使用用户通过浏览器即能访问&#xff0c;无需关注系统的部署、维护、升级等问题&#xff0c;系统充分考虑了模板化、 配置化…

Linux操作系统使用及C高级编程-D17D18编译与调试

编译 当有线程创建时编译&#xff1a;gcc test.c -o test -lpthread 分文件编写时主要是分为&#xff1a;.c&#xff08;函数声明的具体实现&#xff09;、.h&#xff08;说明性文件&#xff1a;#define 结构体共用体 声明&#xff09;、.c(main) 条件编译 一般情况下&#x…

【Linux】初识重定向(输入输出)

一切皆文件 这是Linux的设计理念&#xff0c;因为这个理念的存在我们可以使用统一的方法对待不同的东西&#xff0c;&#xff0c;这也是为什么嵌入式之类的会需要Linux&#xff0c;因为用LInux来操纵硬件真的很方便 另外我们下文也会都基于这个理念来命名&#xff0c; 比如&am…

用做Excel的思维去做BI报表,大材小用了!

最近看到一个姐妹吐槽说公司上了BI后&#xff0c;反而没有以前Excel用得顺手了。这不可能&#xff0c;这不科学&#xff01;怀着求知心点进去一看&#xff0c;这位姐妹居然是在用做Excel的思维去做BI报表&#xff0c;这就很难评了&#xff01; Excel和BI报表&#xff0c;那是两…

MSTP实验

目录 一、实验拓扑 二、实验要求 三、实验步骤 1、创建vlan 2、创建端口组&#xff0c;放通vlan 3、配置MSTP 4、配置主备奋根 一、实验拓扑 二、实验要求 1、所有交换机上创建vlan10&#xff0c;vlan20&#xff0c;vlan30和vlan40 2、所有交换机之间的端口配置为Trunk…

【斗破年番】萧炎斩杀蝎山,活捉魂殿铁护法,救小医仙身中魔斑毒

Hello,小伙伴们&#xff0c;我是拾荒君。 《斗破苍穹年番》第72集的国漫已经更新了。这一集中&#xff0c;蝎毕岩靠着秘术的加成暂时压制住了小医仙。在激烈的交战中&#xff0c;小医仙不得不解开自身的厄难毒体&#xff0c;而每解开一次&#xff0c;她就离死亡更近一步。 萧炎…

java--子类构造器的特点

1.子类构造器的特点 子类的全部构造器&#xff0c;都会先调用父类的构造器&#xff0c;再执行自己。 2.子类构造器是如何实现调用父类构造器的 ①默认情况下&#xff0c;子类全部构造器的第一行代码都是super()(写不写都有)&#xff0c;它会调用父类的无参数构造器。 ②如果…

EfficientViT:具有级联群体注意力的内存高效Transformer

EfficientViT: Memory Efficient Vision Transformer with Cascaded Group Attention 1、介绍2、使用 Vision Transformer 加快速度2.1 内存效率2.2 计算效率2.3 参数效率 3、Efficient Vision Transformer3.1 EfficientViT 构建模块3.3 EfficientViT 网络架构 4、实验5、结论 …

什么是可重入锁

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

给国外客户价格报低了怎么办

前一段时间有一个单子的货发出去了&#xff0c;被朋友提醒才发现自己报错了价格&#xff0c;造成了亏损&#xff0c;而报错价格的原因并不是自己看错了或者是抄错了价格&#xff0c;而是自己的脑子里记错了产品的价格列表。 如果不是朋友善意的提醒&#xff0c;大概我会一直错…