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代码
Aug 22 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php Session无效分析资料整理
2016/11/29 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python控制Firefox方法总结
2019/06/03 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
Python新手学习标准库模块命名
2020/05/29 Python
用Python开发app后端有优势吗
2020/06/29 Python
Python实现EM算法实例代码
2020/10/04 Python
30岁生日感言
2014/01/25 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书