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 相关文章推荐
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
js操作二进制数据方法
Mar 03 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
详解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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
精读《Vue3.0 Function API》
2020/05/20 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python利用IPython提高开发效率
2016/08/10 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python中dict和set的用法讲解
2019/03/28 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
对python 调用类属性的方法详解
2019/07/02 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
物流管理毕业生自荐信范文
2014/03/15 职场文书
工会主席事迹材料
2014/06/03 职场文书
捐款通知怎么写
2015/04/24 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书