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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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
yii实现创建验证码实例解析
2014/07/31 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
一张图带我们入门Python基础教程
2017/02/05 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
医院实习介绍信
2014/01/12 职场文书
办公室岗位职责
2014/02/12 职场文书
大学生创业事迹材料
2014/12/30 职场文书
唐山大地震的观后感
2015/06/05 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Python加密与解密模块hashlib与hmac
2022/06/05 Python