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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
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
使用adodb lite解决问题
2006/12/31 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
利用php生成验证码
2017/02/23 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
javascript 常用功能总结
2012/03/18 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
家具促销活动方案
2014/02/16 职场文书
微信营销策划方案
2014/02/24 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
大学生年度个人总结
2015/02/15 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
python tqdm用法及实例详解
2021/06/16 Python