JavaScript数组去重算法实例小结


Posted in Javascript onMay 07, 2018

本文实例总结了JavaScript数组去重算法。分享给大家供大家参考,具体如下:

测试用例:

arr = ["1",3,"1",1,4,5,1,"2",5,1,{"name":"li","age":20},2,4,3,{"name":"li","age":20},""];

方法一:借助于临时数组与indexOf , 算法复杂度为:O(n^2)

function unique1(arr){
  var temp = [];
  for(var i=0; i<arr.length; i++){
    if(temp.indexOf(arr[i]) == -1){
      temp.push(arr[i]);
    }
  }
  return temp;
}

测试结果:

unique1(arr) : ["1", 3, 1, 4, 5, "2", Object { name="li", age=20}, 2, Object { name="li", age=20}, ""]

bug 无法区分对象

方法二 : 用JavaScript中的Object对象来当作哈希表

function unique2(arr){
  var temp=[];
  var hash={};
  for(var i=0; i<arr.length;i++){
    if(!hash[arr[i]]){
      hash[arr[i]]=true;
      temp.push(arr[i]);
    }
  }
  return temp;
}

测试结果:

unique2(arr) : ["1", 3, 4, 5, "2", Object { name="li", age=20}, ""]

bug : 无法区分: 1 和 "1"

修改

function unique2(arr){
  var temp=[];
  var hash={};
  for(var i=0; i<arr.length;i++){
      var item = arr[i];
    var key = typeof(item)+item;
    if(!hash[key]){
      hash[key]=true;
      temp.push(arr[i]);
    }
  }
  return temp;
}

测试结果:

unique2(arr) : ["1", 3, 1, 4, 5, "2", Object { name="li", age=20}, 2, ""]

方法三:先用sort对数组排序,然后借助临时数组,存储相同元素的最后一个,该方法只能用于纯Number类型数组

function unique3(arr){
  arr.sort(function(a,b){
    return a-b;
  });
  var temp = [];
  for(var i=0;i<arr.length;i++){
    if(arr[i] !== arr[i+1]){
      temp.push(arr[i]);
    }
  }
  return temp;
}
Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
vue购物车插件编写代码
Nov 27 Javascript
vue之将echart封装为组件
Jun 02 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 #Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 #Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 #Javascript
Vue 实现树形视图数据功能
May 07 #Javascript
JavaScript 跨域之POST实现方法
May 07 #Javascript
ES6关于Promise的用法详解
May 07 #Javascript
React Form组件的实现封装杂谈
May 07 #Javascript
You might like
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
yii添删改查实例
2015/11/16 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue实现购物车加减
2020/05/30 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python使用thrift教程的方法示例
2019/03/21 Python
python带参数打包exe及调用方式
2019/12/21 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
2016中学教师读书心得体会
2016/01/13 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby