Javascript 数组去重的方法(四种)详解及实例代码

 更新时间:2016年11月24日 14:11:21   作者:平凡故事  
这篇文章主要介绍了Javascript 数组去重的方法(四种)详解及实例代码的相关资料,这里对四种去重方法进行了详细介绍,并附代码实例,需要的朋友可以参考下

 Javascript 数组去重的四种方法

四种算法来实现这个目的:

第一种方法:

Array.prototype.unique1 = function () {
 var n = []; //一个新的临时数组
 for (var i = 0; i < this.length; i++) //遍历当前数组
 {
  //如果当前数组的第i已经保存进了临时数组,那么跳过,
  //否则把当前项push到临时数组里面
  if (n.indexOf(this[i]) == -1) n.push(this[i]);
 }
 return n;
}

 第二种方法:

Array.prototype.unique2 = function()
{
 var n = {},r=[]; //n为hash表,r为临时数组
 for(var i = 0; i < this.length; i++) //遍历当前数组
 {
 if (!n[this[i]]) //如果hash表中没有当前项
 {
  n[this[i]] = true; //存入hash表
  r.push(this[i]); //把当前数组的当前项push到临时数组里面
 }
 }
 return r;
}
var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]
alert(arr.unique2());

 第三种方法:

Array.prototype.unique3 = function()
{
 var n = [this[0]]; //结果数组
 for(var i = 1; i < this.length; i++) //从第二项开始遍历
 {
 //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
 //那么表示第i项是重复的,忽略掉。否则存入结果数组
 if (this.indexOf(this[i]) == i) n.push(this[i]);
 }
 return n;
}

  其中第1种和第3种方法都用到了数组的indexOf方法。此方法的目的是寻找存入参数在数组中第一次出现的位置。很显然,js引擎在实现这个方法的时候会遍历数组直到找到目标为止。所以此函数会浪费掉很多时间。 而第2中方法用的是hash表。把已经出现过的通过下标的形式存入一个object内。下标的引用要比用indexOf搜索数组快的多。

    为了判断这三种方法的效率如何,我做了一个测试程序,生成一个10000长度的随机数组成的数组,然后分别用几个方法来测试执行时间。 结果表明第二种方法远远快于其他两种方法。 但是内存占用方面应该第二种方法比较多,因为多了一个hash表。这就是所谓的空间换时间。  就是这个 测试页面,你也可以去看看。

第四种方法:

Array.prototype.unique4 = function()
{
 this.sort();
 var re=[this[0]];
 for(var i = 1; i < this.length; i++)
 {
 if( this[i] !== re[re.length-1])
 {
  re.push(this[i]);
 }
 }
 return re;
}

    这个方法的思路是先把数组排序,然后比较相邻的两个值。 排序的时候用的JS原生的sort方法,JS引擎内部应该是用的快速排序吧。 最终测试的结果是此方法运行时间平均是第二种方法的三倍左右,不过比第一种和第三种方法快了不少。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • JS实现的系统调色板完整实例

    JS实现的系统调色板完整实例

    这篇文章主要介绍了JS实现的系统调色板,结合完整实例形式分析了js实现调色板效果的具体步骤与实现技巧,涉及js数值计算与页面元素操作的方法,需要的朋友可以参考下
    2016-12-12
  • js通栏展示效果实现代码

    js通栏展示效果实现代码

    百度有啊通栏展示大家并不陌生吧,下面与大家分享下具体的实现js代码,感兴趣的朋友可以参考下哈
    2013-05-05
  • js中undefined该怎么判断浅析

    js中undefined该怎么判断浅析

    可能很多朋友认为undefined是在js中未定义变量时才会提示的错误,其实不然undefined 是js中的一特殊的变量,我们也可以提前定义哦,下面这篇文章主要给大家介绍了关于js中undefined该怎么判断的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue.js实现页面后退时还原滚动位置的操作方法

    Vue.js实现页面后退时还原滚动位置的操作方法

    Vuet看起来也不是很复杂,只需要定义好模块状态,然后在组件中设置对应的规则来更新模块的状态即可,这篇文章主要介绍了Vue.js实现页面后退时还原滚动位置的实现方法,需要的朋友可以参考下
    2022-07-07
  • JavaScript获得url查询参数的方法

    JavaScript获得url查询参数的方法

    这篇文章主要介绍了JavaScript获得url查询参数的方法,可实现针对URL中参数分析的功能,需要的朋友可以参考下
    2015-07-07
  • javascript实现滑动解锁功能

    javascript实现滑动解锁功能

    本篇文章主要介绍了javascript实现滑动解锁功能的方法实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • event.srcElement 用法笔记e.target

    event.srcElement 用法笔记e.target

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。
    2009-12-12
  • JSQL  一个 web DB 的封装

    JSQL  一个 web DB 的封装

    当然随着HTML5的普及,web DB 已经是大势所趋了
    2010-05-05
  • JavaScript数据结构之二叉树的计数算法示例

    JavaScript数据结构之二叉树的计数算法示例

    这篇文章主要介绍了JavaScript数据结构之二叉树的计数算法,结合具体实例形式分析了javascript二叉树记录更新次数的原理与操作技巧,需要的朋友可以参考下
    2017-04-04
  • 12个非常有用的JavaScript技巧

    12个非常有用的JavaScript技巧

    在这篇文章中,我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码,需要的朋友参考下本文吧
    2017-05-05

最新评论