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 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
React forwardRef的使用方法及注意点
Jun 13 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 字符串分割和比较
2009/10/06 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue路由懒加载的实现方法
2018/03/12 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python中如何引入第三方模块
2020/05/27 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
高中生自我鉴定范文
2013/10/30 职场文书
企业厂长岗位职责
2013/12/17 职场文书
社区十八大感言
2014/01/19 职场文书
法学院方阵解说词
2014/01/29 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
大学生工作求职信
2014/06/23 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL