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下关于$.Ready()的分析
Dec 13 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
jquery 使用简明教程
Mar 05 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
JS数组转字符串实现方法解析
Sep 04 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
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vuex的简单使用教程
2018/02/02 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python 实现堆排序算法代码
2012/06/05 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python匿名函数及应用示例
2019/04/09 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python 字符串常用函数详解
2019/09/11 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
文言文形式的学生求职信
2013/12/03 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
离职证明格式样本
2015/06/12 职场文书