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实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
jQuery中extend函数详解
Jul 13 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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分页函数
2006/10/09 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
prototype class详解
2006/09/07 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
Python AES加密实例解析
2018/01/18 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
母亲节寄语大全
2015/02/27 职场文书
2015年老干部工作总结
2015/04/23 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
Android中的Launch Mode详情
2022/06/05 Java/Android