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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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中url函数介绍及使用示例
2014/02/13 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python的Django框架安装全攻略
2015/07/15 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
C#软件工程师英语面试题
2015/06/07 面试题
如何进行Linux分区优化
2016/09/13 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
酒店管理求职信范文
2014/04/06 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python