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/jQuery 表单美化插件小结
Feb 14 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
基于Vue实现电商SKU组合算法问题
May 29 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
小偷PHP+Html+缓存
2006/12/20 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
Python实现简单字典树的方法
2016/04/29 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
优秀食品类广告词
2014/03/19 职场文书
总经理岗位职责范本
2015/04/01 职场文书
小学体育课教学反思
2016/02/16 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技