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 Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
详细分析React 表单与事件
Jul 08 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文件上传的简单实例
2013/10/19 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python支持断点续传的多线程下载示例
2014/01/16 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
数控机床专业自荐信
2014/05/19 职场文书
体育专业求职信
2014/07/16 职场文书
中国世界遗产导游词
2015/02/13 职场文书
整改通知书格式
2015/04/22 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
认识实习感想
2015/08/10 职场文书
小学记事作文之200字
2019/08/06 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python