js数组中去除重复值的几种方法


Posted in Javascript onAugust 03, 2020

在日常开发中,我们可能会遇到将一个数组中里面的重复值去除,那么,我就将我自己所学习到的几种方法分享出来

去除数组重复值方法:

1,利用indexOf()方法去除

思路:创建一个新数组,然后循环要去重的数组,然后用新数组去找要去重数组的值,如果找不到则使用.push添加到新数组,最后把新数组返回回去就行了

 看不懂没关系,上代码就比较容易懂了

function fun(arr){
 let newsArr = [];
 for (let i = 0; i < arr.length; i++) {
  if(newsArr.indexOf(arr[i]) === -1){
   newsArr.push(arr[i]);
  }
 }
 return newsArr;
}

2,利用splice方法去除

思路:这个方法有点模仿冒泡  俩层循环,外层循环遍历数组,内层循环比较值,如果有相同, 则使用splice去除 然后返回处理完的数组即可

 看不懂没关系,上代码就比较容易懂了

function fun(arr){
 for (let i = 0; i < arr.length; i++) {
  for(let j = i+1; j < arr.length; j++){
   if(arr[i]==arr[j]){
    arr.splice(j,1);



j--;
   }
  }
 }
 return arr;
}

3,利用es6新增的集合Set去除

这里简单介绍一下Set 集合,他跟数组很相识,但不是数组,是集合。他里面也有跟多方法,如增(add),删(delete),查(has)等等。

他最重要的特点是:元素不能重复,即在Set集合不会出现相同的元素

Set去重方案1:

思路:因为Set集合里面不允许出现重复值,那我们就可以利用这个特点将我们的数组传进去去重

 首先new一个Set集合将要去重的数组作为参数传进去,然后创建一个新数组,循环遍历一下集合,将每个集合元素添加到新数组,最后将新数组返回即可

function fun(arr){
 let s1 = new Set(arr);
 let arr2 = [];
 for(let item of s1){
  arr2.push(item);
 }
 return arr2;
}

Set去重方案2(使用数组方法Array.form()):

思路:Array.from(); 能够把伪数组,集合转成数组类型,这个方法配合上Set集合就刚好符合我们的需求

function fun(arr){
 let s1 = new Set(arr); 
 return Array.from(s1);
}

Set去重方案3(使用es6展开运算符...):

思路:es6展开运算符能够将一个数组转为用逗号分隔的参数序列

function fun(arr){
 let s1 = new Set(arr); 
 return [...s1];
}

以上就是js数组中去除重复值的几种方法的详细内容,更多关于js数组去除重复值的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
vue src动态加载请求获取图片的方法
Oct 17 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 #Javascript
javascript运行机制之执行顺序理解
Aug 03 #Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 #Javascript
vue实现PC端分辨率适配操作
Aug 03 #Javascript
浅谈JavaScript中的“!!”作用
Aug 03 #Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 #Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 #Javascript
You might like
西德产收音机
2021/03/01 无线电
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
js实现简易ATM功能
2020/10/27 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
办公室主任职责范文
2013/11/08 职场文书
《画风》教学反思
2014/04/16 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技