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与C#编码解码
Dec 03 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
js图片上传的封装代码
Aug 01 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
JavaScript实现商品评价五星好评
Nov 30 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
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Python简单生成8位随机密码的方法
2017/05/24 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
django中模板的html自动转意方法
2018/05/27 Python
python实现括号匹配的思路详解
2018/08/23 Python
浅析python的优势和不足之处
2018/11/20 Python
python样条插值的实现代码
2018/12/17 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Python 列表的清空方式
2020/01/13 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
用python制作个视频下载器
2021/02/01 Python
省三好学生申请材料
2014/01/22 职场文书
初中美术教学反思
2014/01/29 职场文书
环境保护标语
2014/06/20 职场文书
天猫活动策划方案
2014/08/21 职场文书
学会感恩主题班会
2015/08/12 职场文书
mysql如何查询连续记录
2022/05/11 MySQL