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 相关文章推荐
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
BootStrap的两种模态框方式
May 10 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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实现mysql数据库操作类分享
2014/02/14 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PDO::quote讲解
2019/01/29 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
DOM和JQuery对象有什么区别
2016/11/11 面试题
MYSQL支持事务吗
2013/08/09 面试题
年终晚会主持词
2014/03/25 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
在Python中如何使用yield
2021/06/07 Python