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]点出统计器
Oct 11 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
?生?D片??C字串
2006/12/06 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
php模拟post提交数据的方法
2015/02/12 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
关于js类的定义
2011/06/28 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
package.json文件配置详解
2017/06/15 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
python实现控制台输出彩色字体
2020/04/05 Python
python程序如何进行保存
2020/07/03 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
益达广告词
2014/03/14 职场文书
庆七一晚会主持词
2015/06/30 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript