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车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
ant design charts 获取后端接口数据展示
May 25 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
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
初学Python函数的笔记整理
2015/04/07 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
刘胡兰的英雄事迹材料
2014/02/11 职场文书
北京奥运会口号
2014/06/21 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
导游词之长城八达岭
2019/09/24 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
如何解决php-fpm启动不了问题
2021/11/17 PHP
MySQL中一条update语句是如何执行的
2022/03/16 MySQL