js的数组去重方法

 

目录

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和箭头函数等特性使得数组去重更加简洁和高效。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AT89S52单片机------中断系统

目录 单片机的内部结构 中断请求标志寄存器 (1)TCON寄存器 (2)SCON寄存器 (3)定时器2的控制寄存器T2CON 中断允许与中断优先级的控制寄存器 中断允许寄存器IE 中断优先级寄存器IP 响应中断请求的条件 外部中断响应时间 外部中断的触发方式选择 中断请求的撤销 1.定…

[极客大挑战2023] Crypto/PWN/Reverse

这个网站真辛苦,每次都要回到all,屏幕随时卡。界面有待进步老远。也不提示结束,结果现在才听说结束了,才开始记录一下。 还跟往常一样,WM不作,其它也AK不了,总是差点。 Crypto SignIn 53594…

AI - Steering behaviors(转向系统)

游戏AI角色的转向系统(Steering behaviors)实现 一些向量的接口是cocos2dx的。但从名字上应该能理解做了什么向量操作 Seek: 获取当前位置指向目标点的向量,转化为单位向量后再乘以速度值,即为所需速度desired velo…

Centos 如何判断分区是mbr还是gpt格式

1 介绍 MBR 自20世纪80年代初以来的标准分区表格式每个驱动器最多支持四个主分区最多可以划分2TB的磁盘 GPT GPT是MBR分区表格式的后续每个驱动器最多支持128个分区可以将一个磁盘分区到最大到18艾字节 对小于2TB的磁盘使用MBR对大于2TB的磁盘使用GTP 2 查询方式 2.1 fdis…

uniapp页面使用多个echarts出现数据渲染错乱问题解决

首先,uniapp当中使用echarts是在通过使用renderjs的script模板的前提下实现的,在官方提供的案例当中,核心代码是这一部分: 但如果将其封装为组件,并在一个页面当中引用多次来生成多个charts图标,那么这个时…

化学仿制药参比制剂目录-参比制剂查询网站

2015年以前,参比制剂对于仿制药的研究无关紧要,但推出了’仿制药一致性评价’后,参比制剂的选择成为了决定仿制药成功与否的关键因素,如今在进行仿制药研究时,首要任务就是确定仿制目标,也就是参比制剂。 …

C++之算术生成算法

C之算术生成算法 accumulate #include<iostream> using namespace std; #include<vector> #include<numeric>void test() {vector<int> v;for (int i 0; i < 10; i){v.push_back(i);}int total accumulate(v.begin(), v.end(),0);cout << t…

TIME_WAIT状态套接字重新使用

《TIME_WAIT相关知识》里边有相关理论知识。 《TIME_WAIT状态TCP连接导致套接字无法重用实验》有相关实验。 现代Linux的TCP协议栈已经做了许多升级&#xff0c;所以可以让我们直接重用TIME_WAIT状态套接字而不会引起问题。下边是优化的内容&#xff1a; 1.新连接的SYN告知序列…

Java - Stream Filter 多条件筛选过滤

Java Stream流中Filter用于通过设置的条件过滤出元素 &#xff0c;示例如下&#xff1a; List strings Arrays.asList(“abc”, “”, “bc”, “efg”, “abcd”,"", “jkl”);List filtered strings.stream().filter(string -> !string.isEmpty()).collect(C…

基于ssm框架的公寓租房系统设计与实现

基于ssm框架的公寓租房系统的设计与实现 摘要&#xff1a;在互联网技术的不断发展壮大的背景下,人们生活水平及经济水平也随之得到提上&#xff0c;许多商家都纷纷吧自己的业务重心偏移到网络这个大蛋糕上&#xff0c;为了迎合时代的发展&#xff0c;房屋的出租业务也应该将重…

血的教训--redis被入侵之漏洞利用复现--总览

血的教训–redis被入侵之漏洞利用复现–总览 相信大家对于自己的服务器被入侵&#xff0c;还是比较憎恨的&#xff0c;我的就被攻击了一次&#xff0c;总结经验&#xff0c;自己也是整理了这一个系列&#xff0c;从最基础到最后面的自己总结被攻破的步骤&#xff0c;非常清晰的…

【腾讯云云上实验室】探索向量数据库背后的安全监控机制

当今数字化时代&#xff0c;数据安全成为了企业和个人最为关注的重要议题之一。随着数据规模的不断增长和数据应用的广泛普及&#xff0c;如何保护数据的安全性和隐私性成为了迫切的需求。 今天&#xff0c;我将带领大家一起探索腾讯云云上实验室所推出的向量数据库&#xff0c…

抽象类的使用—模板设计模式 Java

模板设计模式 一、引入二、改进 一、引入 需求 ① 有多个类&#xff0c;完成不同的任务 job ② 要求统计得到各自完成任务的时间 ③ 请编程实现 >最容易想到的方法&#xff0c;写类&#xff0c;统计时间 AA BB中的 job 方法中是有重复的。 >改进1&#xff1a;每个类中&…

基于单片机仿指针显示的电子时钟设计

**单片机设计介绍&#xff0c; 基于51单片机超声波测距汽车避障系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机仿指针显示的电子时钟是一种利用单片机控制器和LED或LCD显示屏幕来模拟传统时钟指针的显示效果的设计…

ubuntu下载vscode并运行程序

如有帮助点赞收藏关注&#xff01; 如需转载&#xff0c;请注明出处&#xff01; 好久没有在linux下编译c代码了&#xff0c;由于换了酷炫彩灯的电脑。又要重新安装一次喽。做个记录&#xff0c;可以帮助到有需要的人&#xff0c;接下来不要错过每一个步骤。 我们一起手把手运行…

【数据结构】顺序表---C语言版

【数据结构】顺序表 前言&#xff1a;一、线性表二、顺序表1.顺序表的概念及结构&#xff1a;2.顺序表的分类&#xff1a;3.顺序表缺陷&#xff1a; 三、顺序表的代码实现&#xff1a;1.头文件&#xff1a;2.函数文件&#xff1a;3.测试文件&#xff1a; 四、顺序表的相关OJ题&…

Unreal Engine 学习笔记 (4)—— 多方向动画

1.创建混合空间 1.设置水平方向命名为Direction表示行进方向 -45,300表示向左前方45度方向行走-90,300表示向正左方90度方向行走-135,300表示向左后方45度方向行走-180,300表示向正后方行走右侧方向动画与上述左侧使用同样方法设置Run动画与Walk动画使用同样方法设置 2. 设置…

数据库第十第十一章 恢复和并发简答题

数据库第一章 概论简答题 数据库第二章 关系数据库简答题 数据库第三章 SQL简答题 数据库第四第五章 安全性和完整性简答题 数据库第七章 数据库设计简答题 数据库第九章 查询处理和优化简答题 1.什么是数据库中的事务&#xff1f;它有哪些特性&#xff1f;这些特性的含义是什么…

Spring不再支持Java8了

在今天新建模块的时候发现了没有java8的选项了&#xff0c;结果一查发现在11月24日&#xff0c;Spring不再支持8了&#xff0c;这可怎么办呢&#xff1f;我们可以设置来源为阿里云https://start.aliyun.com/ 。 java8没了 设置URL为阿里云的地址

spring-webmvc练习-日程管理-访问后端展示列表数据

1、util/request.js import axios from "axios";let request axios.create({baseURL: "http://localhost:8080",timeout: 50000 });export default request 2、api/schedule.js import request from "../util/request.js";export let getSchedu…