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

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

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

相关文章

我是如何找到人生第一个SRC漏洞的

免责声明:由于传播或利用此文所提供的信息、技术或方法而造成的任何直接或间接的后果及损失,均由使用者本人负责, 文章作者不为此承担任何责任。 这是一篇新手文章。 因为参加了补天的公益SRC活动,需要提交第一个漏洞&#xff…

armv9的RME简介

快速链接: . 👉👉👉 个人博客笔记导读目录(全部) 👈👈👈 付费专栏-付费课程 【购买须知】:【精选】ARMv8/ARMv9架构入门到精通-[目录] 👈👈👈 — 适合小白入门【目录】ARMv8/ARMv9架构高级进阶-[目录]👈👈👈 — 高级进阶、小白勿买【加群】ARM/TEE…

基于SSM的咖啡销售系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的咖啡销售系统,java项目。 ecli…

k8s-deployment控制器 5

K8s控制器是Kubernetes(简称k8s)系统中一个重要的组成部分,它是一个管理Pod的中间层,可以创建和管理多个Pod副本,确保它们按照预定的数量和行为进行运行。 通过编写yaml文件将信息全部存到etcd中,控制器通…

初学Flink 学后总结

最近开始学习Flink,一边学习一边记录,以下是基于【尚硅谷】Flink1.13实战教程总结的笔记,方便后面温习 目录 初始 Flink 一:基础概念 1.Flink是什么 2.Flink主要应用场景

《微信小程序开发从入门到实战》学习三十三

第四章 云开发 本章云开发技术的功能与使用,包括以下几点: 1.学习使用云开发控制台 2.学习云开发JSON数据库功能 3.学习云开文件存储功能 4.学习云函数功能 5.使用云开发技术实现投票小程序的服务端功能 投票小程序大部分已经实现。需要实现&#…

系统设计一些个人小结

一些要记得的数字 关于时间 1天 > 86400秒 关于存储 跟存储有关的K是1024,其它都是1000。下面的数字忽略1000和1024的区别。 1T > 10^12 1G > 10^9 1M > 10^6 1K > 10^3 1B > 10^9 关于网页 1个网页大小按10K估算。下载一个网页按2s估算。 关于…

高端制造业中的通用性超精密3D光学测量仪器

超精密光学3D测量仪器具有高精度、自动化程度高、实时反馈和范围广等优势。它能够实现微米级别的精确测量,能够精确测量产品的尺寸、形状和表面粗糙度等,具有广泛的应用价值和重要意义。 超精密光学3D测量仪器配备多种传感器、控制器和计算机系统&#…

fastadmin框架自带的数据效验

目录 一、fastadmin框架介绍: 注意: 二、fastadmin框架自带效验 三、引用方式: 1.引用: 2.使用案例: 一、fastadmin框架介绍: FastAdmin是基于ThinkPHP和Bootstrap开发的一款开源后台管理系统框架。…

深入理解OS--数值编码

信息的表示和处理 寻址和字节顺序 位于0x100处,int类型值0x01234567在大端和小端下的存储。 字符串的存储不受字节序影响。 移位 1.对左移,右边统一补0 2.对右移,分为算术右移,逻辑右移 算术右移下,左边补原最高有效…

OpenCvSharp从入门到实践-(03)像素

目录 像素 1、确定像素位置 2、获取像素的BGR值 3、修改像素的BGR值 像素 图像数字化是指用数字表示图像,每一幅数字图像都是有M行N列的像素组成的,其中每一个像素都存储一个像素值。计算机通常会把像素值处理为256个灰度级别,这256个灰…

k8s中安装consul集群

一、准备知识 headless services一般结合StatefulSet来部署有状态的应用,比如kafka集群,mysql集群,zk集群等,也包括本文要部署的consul集群。 0、consul集群 consul集群的分布式协议算法采用的是raft协议,这意味着必…

折线图-line

业务组件调用代码 <template><lineCom :title"lineComProps.title" :legendDataList"lineComProps.legendDataList":FeatureList"lineComProps.FeatureList" :xAxisData"lineComProps.xAxisData":seriesMultipleFlag"l…

【后端】数据字典自动生成枚举

前言 随着我老板给我灌溉的思想,逐渐开始利用代码来完成一些重复性且没有创造性的工作(我变懒啦),当我发现数据字典可以生成枚举从而大大减少开发时间的时候,我意识到事情的重要性。 数据字典 我一开始在网上找各种代码生成器的框架,然后突然意识到,这个不就是简单的…

2022年MathorCup大数据竞赛B题北京移动用户体验影响因素研究求解全过程文档及程序

2022年MathorCup高校数学建模挑战赛—大数据竞赛 B题 北京移动用户体验影响因素研究 原题再现&#xff1a; 移动通信技术飞速发展&#xff0c;给人们带来了极大便利&#xff0c;人们也越来越离不开移动通信技术带来的各种便捷。随着网络不断的建设&#xff0c;网络覆盖越来越…

XIAO ESP32S3之套件简绍

很高兴收到柴火创客空间寄来的XIAO ESP32S3开发套件。 一、套件介绍 1、电路板部分 一块XIAO ESP32S3主板、一块摄像头接口板&#xff08;可接SD卡&#xff09;&#xff0c;一根2.4G天线。 2、配件部分 一根USB-A转TypeC数据线、一个USB3.0转TypeC转接头、一个SD卡读卡器&am…

vue中keep-alive的使用

什么是keep-alive&#xff1f; keep-alive是一个内置组件&#xff0c;用于缓存和管理组件的状态。 当 keep-alive包裹一个组件时&#xff0c;这个组件的状态将会被缓存起来&#xff0c;而不是每次重新渲染。这在多个视图之间切换时特别有用&#xff0c;可以避免重复的创建和销…

vue项目通过HBuilder打包成apk,实现apk自动更新下载

vue 项目通过 HBuilder 打包成 apk&#xff0c;实现 apk 自动更新下载 1、vue 项目通过 HBuilder 打包成 apk vue 项目在终端执行 npm run build 打包成 dist 文件&#xff0c;生成的 dist 文件在 项目根目录下 在 HBuilder 中 新建一个项目 默认选择 5APP 的默认模板项目…

springboot+vue智能企业设备管理系统05k50

智能设备管理系统主要是为了提高工作人员的工作效率和更方便快捷的满足用户&#xff0c;更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性&#xff0c;遵循开发的系统优化的原则&#xf…

linux 命令 sudo、su 命令

sudo命令详解 1、初识sudo sudo是linux下常用的允许普通用户使用超级用户权限的工具&#xff0c;sudo 用来执行需要提升权限&#xff08;通常是作为 root 用户&#xff09;的命令&#xff0c;允许系统管理员让普通用户执行一些或者全部的root命令&#xff0c;如halt&#xff…