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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
javascript实现控制div颜色
Jul 07 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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二维数组合并及去重复的方法
2015/03/04 PHP
lib.utf.js
2007/08/21 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
javascript数组去重小结
2016/03/07 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python使用turtle库绘制树
2018/06/25 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python做接口测试的必要性
2019/11/20 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
煤矿班组长的职责
2013/12/25 职场文书
数学教学随笔感言
2014/02/17 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
电话客服工作职责
2014/07/27 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
营销与策划实训报告
2014/11/05 职场文书
外国人来华邀请函
2015/01/31 职场文书
初中重阳节活动总结
2015/05/05 职场文书
国情备忘录观后感
2015/06/04 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang