javascript数组去重常用方法实例分析

 更新时间:2017年04月11日 10:19:21   作者:布瑞泽的童话  
这篇文章主要介绍了javascript数组去重常用方法,结合实例形式对比分析了几种常用的数组去重方法实现技巧与优缺点,需要的朋友可以参考下

本文实例讲述了javascript数组去重常用方法。分享给大家供大家参考,具体如下:

数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍。

首先是最常见的方法,也就是添加一个临时数组,将原数组遍历,加入临时数组,每次加入时判断待加入的元素是否存在于临时数组中,代码如下:

// 对数组进行去重操作,只考虑数组中元素为数字或字符串,返回一个去重后的数组
//第一种方法,遍历,将没有的插入临时数组
function uniqArray1(arr) {
  var n=[];
  for(var i=0;i<arr.length;i++){
    //如果当前项已经保存到了临时数组,则跳过,否则加入
    if(n.indexOf(arr[i])==-1){
      n.push(arr[i]);
    }
  }
  return n;
}

那么还有没有更好的办法呢?可以采用哈希表的思想,在JavaScript中,对象的查找比数组下标的查找要快很多倍。所以我们可以创建一个对象专门来存放已加入临时数组的元素,那么每次加入新的元素时就可以通过查找对象来判断是否重复了,代码如下:

//第二种方法,使用哈希表
function uniqArray2(arr){
  var n={},//哈希表
    r=[];//零时数组
  for(var i=0;i<arr.length;i++){
    if(n[arr[i]]==null){//如果哈希表中没有,则添加到哈希表,且进入临时数组
      n[arr[i]]=true;
      r.push(arr[i]);
    }
  }
  return r;
}

还有一种方法,虽然速度没有哈希表快,但是比最基本的indexOf来的快,思想就是先经过排序函数sort,再比较相邻的元素,不同的就加到临时数组中。代码如下:

//第三种方法,先排序,再比较邻接部分
function uniqArray3(arr){
  arr.sort();
  var r=[arr[0]];
  for(var i=1;i<arr.length;i++){
    if(arr[i]!=r[r.length-1]){//由于已经经过了排序,所以相邻的是相同的
      r.push(arr[i]);
    }
  }
  return r;
}

最后实验代码如下:

//验证数组去重函数的使用
var arr=[2,3,4,2,4,5,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3];
for(var i=0;i<10000000;i++){//为了分辨出花费时间的区别,特此增加数组的长度
  arr.push(3);
}
var time1=Date.now();
var n1=uniqArray1(arr);
var time2=Date.now();
console.log(n1);//2,3,4,5说明第一种去重成功
console.log(time2-time1);//218
time1=Date.now();
var n2=uniqArray2(arr);
time2=Date.now();
console.log(n2);//2,3,4,5说明第二种去重成功
console.log(time2-time1);//63,说明对象下标的引用要比indexOf搜索快得多
time1=Date.now();
var n3=uniqArray3(arr);
time2=Date.now();
console.log(n3);//2,3,4,5说明第三种去重成功
console.log(time2-time1);//203,说明sort方法使用快排,比indexOf快,但是没有哈希快

可以看到哈希算法的速度是最快的。

PS:这里再为大家提供几款去重复工具供大家参考使用:

在线去除重复项工具:
http://tools.jb51.net/code/quchong

在线文本去重复工具:
http://tools.jb51.net/aideddesign/txt_quchong

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)

    JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)

    这篇文章主要介绍了JavaScript Drum Kit 指南,也就是纯 JS 模拟敲鼓效果实现代码,需要的朋友可以参考下
    2017-07-07
  • 基于MVC方式实现三级联动(JavaScript)

    基于MVC方式实现三级联动(JavaScript)

    这篇文章主要为大家详细介绍了基于MVC方式实现三级联动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 小程序实现tab更换页面效果

    小程序实现tab更换页面效果

    这篇文章主要为大家详细介绍了小程序实现tab更换页面效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript函数的4种调用方法详解

    JavaScript函数的4种调用方法详解

    了解函数的调用过程有助于深入学习与分析JavaScript代码。本文是JavaScript高级这个系列中的第三篇文章,主要介绍JavaScript中函数的四种使用形式
    2014-04-04
  • JS实现点击按钮可实现编辑功能

    JS实现点击按钮可实现编辑功能

    本文通过一段实例代码给大家介绍了基于js实现点击按钮可编辑效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下吧
    2018-07-07
  • webpack4.x打包过程详解

    webpack4.x打包过程详解

    这篇文章主要介绍了webpack4.x打包过程详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • js实现一款简单踩白块小游戏(曾经很火)

    js实现一款简单踩白块小游戏(曾经很火)

    本文给大家分享原生js实现曾经很火的一款小游戏—别踩白块,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-12-12
  • 微信小程序实现定位及到指定位置导航的示例代码

    微信小程序实现定位及到指定位置导航的示例代码

    这篇文章主要介绍了微信小程序实现定位及到指定位置导航的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript操作元素实例大全

    JavaScript操作元素实例大全

    JavaScript可以对各种网页元素进行操控,下面这篇文章主要给大家介绍了关于JavaScript操作元素的相关资料,文中通过多个实例详细介绍了操作元素的方法,需要的朋友可以参考下
    2021-06-06
  • 基于Two.js实现星球环绕动画效果的示例

    基于Two.js实现星球环绕动画效果的示例

    本篇文章主要介绍了基于Two.js实现=星球环绕动画效果的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论