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 相关文章推荐
来自国外的页面JavaScript文件优化
Dec 08 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 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
php获取文件大小的方法
2014/02/26 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Openlayers实现距离面积测量
2020/09/28 Javascript
python妙用之编码的转换详解
2017/04/21 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python实现电子词典
2020/03/03 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python中加背景音乐如何操作
2020/07/19 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
简历中自我评价分享
2013/10/09 职场文书
诚信考试倡议书
2014/04/15 职场文书
安全协议书
2014/04/23 职场文书
自我推荐信范文
2014/05/09 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
化工生产实习心得体会
2016/01/22 职场文书
《风筝》教学反思
2016/02/23 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python