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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP数据过滤的方法
2013/10/30 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php eval函数一句话木马代码
2015/05/21 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
如何在PHP中生成随机数
2020/06/04 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python中模块string.py详解
2017/03/12 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
专升本自我鉴定
2013/10/10 职场文书
作文批改评语
2014/12/25 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
详解Python中__new__方法的作用
2022/03/31 Python