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里的条件判断
Feb 27 Javascript
jquery实用代码片段集合
Aug 12 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
js 只比较时间大小的实例
2017/10/26 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python任务调度实例分析
2015/05/19 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python list转矩阵的实例讲解
2018/08/04 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
小学毕业感言150字
2014/02/05 职场文书
竞争上岗实施方案
2014/03/21 职场文书
《金子》教学反思
2014/04/13 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
信访稳定工作汇报
2014/10/27 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL