JS实现数组去重方法总结(六种方法)


Posted in Javascript onJuly 14, 2017

方法一:

双层循环,外层循环元素,内层循环时比较值

如果有相同的值则跳过,不相同则push进数组

Array.prototype.distinct = function(){
 var arr = this,
  result = [],
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] === arr[j]){
    j = ++i;
   }
  }
  result.push(arr[i]);
 }
 return result;
}
var arra = [1,2,3,4,4,1,1,2,1,1,1];
arra.distinct();    //返回[3,4,2,1]

方法二:利用splice直接在原数组进行操作

双层循环,外层循环元素,内层循环时比较值

值相同时,则删去这个值

注意点:删除元素之后,需要将数组的长度也减1.

Array.prototype.distinct = function (){
 var arr = this,
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] == arr[j]){
    arr.splice(j,1);
    len--;
    j--;
   }
  }
 }
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

优点:简单易懂

缺点:占用内存高,速度慢

方法三:利用对象的属性不能相同的特点进行去重

Array.prototype.distinct = function (){
 var arr = this,
  i,
  obj = {},
  result = [],
  len = arr.length;
 for(i = 0; i< arr.length; i++){
  if(!obj[arr[i]]){ //如果能查找到,证明数组元素重复了
   obj[arr[i]] = 1;
   result.push(arr[i]);
  }
 }
 return result;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

方法四:数组递归去重

运用递归的思想

先排序,然后从最后开始比较,遇到相同,则删除

Array.prototype.distinct = function (){
 var arr = this,
  len = arr.length;
 arr.sort(function(a,b){  //对数组进行排序才能方便比较
  return a - b;
 })
 function loop(index){
  if(index >= 1){
   if(arr[index] === arr[index-1]){
    arr.splice(index,1);
   }
   loop(index - 1); //递归loop函数进行去重
  }
 }
 loop(len-1);
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
var b = a.distinct();
console.log(b.toString());  //1,2,3,4,5,6,45,56

方法五:利用indexOf以及forEach

Array.prototype.distinct = function (){
 var arr = this,
  result = [],
  len = arr.length;
 arr.forEach(function(v, i ,arr){  //这里利用map,filter方法也可以实现
  var bool = arr.indexOf(v,i+1);  //从传入参数的下一个索引值开始寻找是否存在重复
  if(bool === -1){
   result.push(v);
  }
 })
 return result;
};
var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
var b = a.distinct();
console.log(b.toString()); //1,23,2,3

方法六:利用ES6的set

Set数据结构,它类似于数组,其成员的值都是唯一的。

利用Array.from将Set结构转换成数组

function dedupe(array){
 return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

拓展运算符(...)内部使用for...of循环

let arr = [1,2,3,3];
let resultarr = [...new Set(arr)]; 
console.log(resultarr); //[1,2,3]

下面给大家补充介绍合并数组并去重的方法

一、concat()方法

思路:concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。该方法会产生一个新的数组。

function concatArr(arr1, arr2){
  var arr = arr1.concat(arr2);
  arr = unique1(arr);//再引用上面的任意一个去重方法
  return arr;
}

二、Array.prototype.push.apply()

思路:该方法优点是不会产生一个新的数组。

var a = [1, 2, 3];
 var b = [4, 5, 6];
 Array.prototype.push.apply(a, b);//a=[1,2,3,4,5,6]
 //等效于:a.push.apply(a, b);
 //也等效于[].push.apply(a, b); 
 function concatArray(arr1,arr2){
   Array.prototype.push.apply(arr1, arr2);
   arr1 = unique1(arr1);
   return arr1;
 }

总结

以上所述是小编给大家介绍的JS实现数组去重方法总结(六种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript无阻塞加载具体方式
Jun 28 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
javascript变量提升和闭包理解
Mar 12 Javascript
详解Angular路由之路由守卫
May 10 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
详解VUE中v-bind的基本用法
Jul 13 #Javascript
vue通过watch对input做字数限定的方法
Jul 13 #Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
You might like
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP SOCKET编程详解
2015/05/22 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
如何利用cmp命令比较文件
2013/09/23 面试题
村干部培训班主持词
2014/03/28 职场文书
安全宣传标语口号
2014/06/06 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
综治维稳工作汇报
2014/10/27 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
php解析非标准json、非规范json的方式实例
2022/05/10 PHP