javascript数组去重小结


Posted in Javascript onMarch 07, 2016

前言

最近为了换工作,准备下面试,开始回顾复习JavaScript相关的知识,昨天下午想到了数组去重的相关方法,干脆整理出几篇JavaScript算法文章,以备后用,此系列文章不定篇数,不定时间,想到哪写到哪,不保证正确性,不保证高效率,只是谈谈个人理解,如有错误,请诸位斧正。

关于去重

数组去重是一个比较常见的算法考察点,实现去重的方式无外乎通过唯一性和非唯一性。简单来讲就是挑出唯一的或者删除不唯一的。以下所有算法都是我自己瞎命名的,请无视之。

循环匹配去重

顾名思义,就是把数组中的每一个元素都和存放元素的数组对比,遇到不重复的元素,放入新数组中,直至循环结束,由于匹配也有循环,也可以称为双循环匹配去重,这也是大家都能想到的最简单的方式。

实现代码:

var arr=[1,3,4,56,3,7,9,7];
var result=[];
//匹配
function isMatch(array,n){
  for(var i=0;i<array.length;i++){
    if(array[i]==n){
      return true;
    }
  }
  return false;
};
//验证所有元素
function unqiue(array){
  for(var i=0;i<array.length;i++){
    if(!isMatch(result,array[i])){
      result.push(array[i]);
    }
  }
  return result;
};

console.log(unqiue(arr));

注意:上面方法有一个bug,当存在数字和数字形式的字符串的时候,没有区分出数字和数字字符串。因为在匹配函数isMatch()里用的是双等“==”,没有验证元素类型,实际应该使用全等“===”。
修改后的代码如下:

var arr=[1,3,4,56,3,'1',7,9,7];
var result=[];
//匹配
function isMatch(array,n){
  for(var i=0;i<array.length;i++){
    if(array[i]===n){
      return true;
    }
  }
  return false;
};
//验证所有元素
function unqiue(array){
  for(var i=0;i<array.length;i++){
    if(!isMatch(result,array[i])){
      result.push(array[i]);
    }
  }
  return result;
};

console.log(unqiue(arr));

算法优缺点:

优点:

实现简单,思路直观

缺点:

效率低下

JSON去重/对象去重/字典去重

JSON去重,简单来讲就是利用Object对象key的唯一性,将数组的元素转换为JSON或者说对象的key值。JSON的value存储数组的索引index,然后对JSON对象进行for in循环,存储到新数组中。

Array、JSON、{}都是Object,所以采用任意一种都可以实现此算法。

实现代码:

Array方式:

var arr=[1,3,4,56,3,'1',7,9,7];
function unqiue(array){
  var cache=[];
  var result=[];
   //将数组元素转为对象的key
  for(var i=0;i<array.length;i++){
    cache[array[i]]=i;
  };
  
  //存储key(实际的数组元素)
  for(key in cache){
    result.push(key);
  };
  
  return result;
}
  
console.log(unqiue(arr));

JSON方式:

var arr=[1,3,4,56,3,'1',7,9,7];
function unqiue(array){
  var cache={};
  var result=[];
   //将数组元素转为对象的key
  for(var i=0;i<array.length;i++){
    cache[array[i]]=i;
  };
  
  //存储key(实际的数组元素)
  for(key in cache){
    result.push(key);
  };
  
  return result;
}
  
console.log(unqiue(arr));

Object方式:

var arr=[1,3,4,56,3,'1',7,9,7];
function unqiue(array){
  var cache=new Object();
  var result=[];
   //将数组元素转为对象的key
  for(var i=0;i<array.length;i++){
    cache[array[i]]=i;
  };
  
  //存储key(实际的数组元素)
  for(key in cache){
    result.push(key);
  };
  
  return result;
}
  
console.log(unqiue(arr));

算法优缺点:

优点:

简单

效率非常高

缺点:

1.改变了数组元素的类型()
2.有bug(无非区分数字和数字类型字符串)

队列递归去重

昨天晚上思忖良久想到用队列的方式,先将数组排序成升序或降序的队列,这样相同的元素就处在一个区域内,然后从队尾向前匹配,如果匹配成功,删除队尾,然后前一个元素再向其前面的匹配。整个匹配完成之后,剩下的元素就是去重过后的队列。

var arr=[6, 4, 6, 9, '6', 13, 56, 9, ,'11',1, 8, '7', 17, 5, 45, 3, 7];

function unqiue(array){
  //排序数组,形成队列
  array.sort(function(m,n){return m-n;});
  ////排序后,队尾向前对比,如果相同,删除队尾,依次类推
  function loop(Index){
    if(Index>=1){
      if(array[Index]===array[Index-1]){
        arr.splice(Index,1);
      }
      loop(Index-1);
    }
    
  }
  loop(array.length-1);
  return array;
}

console.log(unqiue(arr));

算法优缺点:

优点:

效率较高

缺点:

效率不是最高

INDEXOF去重方式

判断浏览器是否支持indexOf ,indexOf 为ecmaScript5新方法 IE8以下(包括IE8, IE8只支持部分ecma5)不支持

if (!Array.prototype.indexOf){ 
// 新增indexOf方法 
Array.prototype.indexOf = function(item){ 
var result = -1, a_item = null; 
if (this.length == 0){ 
return result; 
} 
for(var i = 0, len = this.length; i < len; i++){ 
a_item = this[i]; 
if (a_item === item){ 
result = i; 
break; 
} 
} 
return result; 
} 
}
Javascript 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
Highcharts入门之简介
Aug 02 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
详解JS正则replace的使用方法
Mar 06 #Javascript
浅谈javascript中的call、apply、bind
Mar 06 #Javascript
一波JavaScript日期判断脚本分享
Mar 06 #Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 #Javascript
JavaScript实现数据类型的相互转换
Mar 06 #Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 #Javascript
javascript实现label标签跳出循环操作
Mar 06 #Javascript
You might like
php模块memcache和memcached区别分析
2011/06/14 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
深入密码加salt原理的分析
2013/06/06 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP加密解密实例分析
2015/12/25 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
php生成无限栏目树
2017/03/16 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
百度地图api如何使用
2015/08/03 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python List cmp()知识点总结
2019/02/18 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
Python容器类型公共方法总结
2020/08/19 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
哈理工毕业生的求职信
2013/12/22 职场文书
小学生评语大全
2014/04/18 职场文书
辅导员评语
2014/05/04 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
四群教育工作总结
2015/08/10 职场文书
2019各种承诺书范文
2019/06/24 职场文书