JavaScript实现删除数组重复元素的5种常用高效算法总结


Posted in Javascript onJanuary 18, 2018

本文实例讲述了JavaScript实现删除数组重复元素的5种常用高效算法。分享给大家供大家参考,具体如下:

这里就 js 如何实现数组去重整理出5种方法,并附上演示Demo 以及 源码。

1.遍历数组法

最简单的去重方法,

实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中;注意点:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下:

// 最简单数组去重法
function unique1(array){
 var n = []; //一个新的临时数组
 //遍历当前数组
 for(var i = 0; i < array.length; i++){
  //如果当前数组的第i已经保存进了临时数组,那么跳过,
  //否则把当前项push到临时数组里面
  if (n.indexOf(array[i]) == -1) n.push(array[i]);
 }
 return n;
}
// 判断浏览器是否支持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;
 }
}

2.对象键值对法

该方法执行的速度比其他任何方法都快, 就是占用的内存大一些;

实现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键,不是的话给对象新增该键并放入新数组。注意点: 判断是否为js对象键时,会自动对传入的键执行“toString()”,不同的键可能会被误认为一样;例如: a[1]、a["1"] 。解决上述问题还是得调用“indexOf”。

// 速度最快, 占空间最多(空间换时间)
function unique2(array){
 var n = {}, r = [], len = array.length, val, type;
  for (var i = 0; i < array.length; i++) {
    val = array[i];
    type = typeof val;
    if (!n[val]) {
      n[val] = [type];
      r.push(val);
    } else if (n[val].indexOf(type) < 0) {
      n[val].push(type);
      r.push(val);
    }
  }
  return r;
}

3.数组下标判断法

还是得调用“indexOf”性能跟方法1差不多,

实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i,那么表示第i项是重复的,忽略掉。否则存入结果数组。

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

4.排序后相邻去除法

虽然原生数组的”sort”方法排序结果不怎么靠谱,但在不注重顺序的去重里该缺点毫无影响。

实现思路:给传入数组排序,排序后相同值相邻,然后遍历时新数组只加入不与前一值重复的值。

// 将相同的值相邻,然后遍历去除重复值
function unique4(array){
 array.sort(); 
 var re=[array[0]];
 for(var i = 1; i < array.length; i++){
  if( array[i] !== re[re.length-1])
  {
   re.push(array[i]);
  }
 }
 return re;
}

5.优化遍历数组法

源自外国博文,该方法的实现代码相当酷炫;

实现思路:获取没重复的最右一值放入新数组。(检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断)

// 思路:获取没重复的最右一值放入新数组
function unique5(array){
 var r = [];
 for(var i = 0, l = array.length; i < l; i++) {
  for(var j = i + 1; j < l; j++)
   if (array[i] === array[j]) j = ++i;
  r.push(array[i]);
 }
 return r;
}

github项目源码:https://github.com/wteam-xq/testDemo/blob/master/array.html

Javascript 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 #Javascript
分享ES6的7个实用技巧
Jan 18 #Javascript
vue 动态修改a标签的样式的方法
Jan 18 #Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 #Javascript
Nuxt.js踩坑总结分享
Jan 18 #Javascript
Nuxt.js实战详解
Jan 18 #Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 #Javascript
You might like
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
python自定义类并使用的方法
2015/05/07 Python
Python实现的字典值比较功能示例
2018/01/08 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Numpy掩码式数组详解
2018/04/17 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
大学生演讲稿范文
2014/01/11 职场文书
2014植树节活动总结
2014/03/11 职场文书
英语教师岗位职责
2014/03/16 职场文书
安全生产责任书范本
2014/04/15 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python