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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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/11/23 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
JavaScript中this用法学习笔记
2019/03/17 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
python增加矩阵维度的实例讲解
2018/04/04 Python
详解Python IO口多路复用
2020/06/17 Python
keras K.function获取某层的输出操作
2020/06/29 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
基本款天堂:Everlane
2017/05/13 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
运动会通讯稿100字
2014/01/31 职场文书
一体化教学实施方案
2014/05/10 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
创先争优标语
2014/06/27 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS