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 相关文章推荐
JavaScript中的prototype使用说明
Apr 13 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
JS自定义右键菜单实现代码解析
Jul 16 Javascript
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
php Undefined index的问题
2009/06/01 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python使用正则筛选信用卡
2019/01/27 Python
python小程序实现刷票功能详解
2019/07/17 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
计算机操作自荐信
2013/12/07 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
化工实习心得体会
2014/09/09 职场文书
运动会闭幕词
2015/01/28 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技