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 firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
js实现加载更多功能实例
Oct 27 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
js实现鼠标跟随运动效果
Aug 02 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
React实现轮播效果
Aug 25 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入门学习的几个不错的实例代码
2008/07/13 PHP
php 日期时间处理函数小结
2009/12/18 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php中file_exists函数使用详解
2015/05/08 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
赢在中国观后感
2015/06/02 职场文书
基石观后感
2015/06/12 职场文书