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 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vue写h5页面的方法总结
Feb 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
JS实现打字游戏
2019/12/17 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
python批量同步web服务器代码核心程序
2014/09/01 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python @property的用法及含义全面解析
2018/02/01 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
尊老爱幼演讲稿
2014/09/04 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
倡议书范文大全
2015/04/28 职场文书