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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
vue2.x select2 指令封装详解
Oct 12 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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性能测试工具xhprof的详解
2013/06/03 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
js 操作符汇总
2014/11/08 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
python列表操作实例
2015/01/14 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
pandas中Timestamp类用法详解
2017/12/11 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
节约粮食标语
2014/06/18 职场文书
2014年法务工作总结
2014/12/11 职场文书
撤诉状格式范本
2015/05/19 职场文书
PyTorch的Debug指南
2021/05/07 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python