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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
详解vue.js的devtools安装
May 26 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
Vue formData实现图片上传
Aug 20 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
js实现录音上传功能
Nov 22 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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
基于文本的搜索
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
JS 表单验证大全
2011/11/23 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Python logging模块原理解析及应用
2020/08/13 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
导游个人求职信
2014/04/25 职场文书
教师求职信范文
2014/05/24 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
督导岗位职责范本
2015/04/10 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书