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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
javascript定义函数的方法
Dec 06 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
vue中使用props传值的方法
May 08 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的分页功能
2007/03/21 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php制作动态随机验证码
2015/02/12 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python 线程的五个状态
2020/09/22 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
加工操作管理制度
2014/01/19 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
欠条样本
2015/07/03 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书