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基础篇
Nov 13 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
实例详解Node.js 函数
Jun 10 Javascript
详解JS预解析原理
Jun 16 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
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
用jscript实现新建word文档
2007/06/15 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Django框架安装方法图文详解
2019/11/04 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
如何清空python的变量
2020/07/05 Python
python下载的库包存放路径
2020/07/27 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
flask框架中的cookie和session使用
2021/01/31 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
css sprite简单实例
2016/05/23 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
开会迟到检讨书
2014/02/03 职场文书
简历的自我评价范文
2014/02/04 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers