JavaScript数组去重的多种方法(四种)


Posted in Javascript onSeptember 19, 2017

数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 true 的视为相同元素,需要去重,所以,1 和 "1" 是不同的元素,1 和 new Number(1) 是不同的元素,{} 和 {} 是不同的元素(引用不同)。(当然如果需求认为 {} 和 {} 算作相同的元素,那么解法就不一样了)

method 1

使用两重循环

function unique(arr) {
 var res = [];
 for(var i = 0, len = arr.length;i < len; i++) {
  var item = arr[i];
  for(var j = 0, jLen = res.length; j<jLen; j++) {
   if(item == res[j]) break;
  }
  if(j == jLen) res.push(item);
 }
 return res;
}

method 2

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

这里判断可以使用一个语法糖

function unique(arr) {
 var res = [];
 for(var i = 0, len = arr.length;i < len; i++) {
  var item = arr[i];
  (res.indexOf(item) === -1) && res.push(item);
 }
 return res;
}

但是在低版本浏览器并没有 indexOf

var indexOf = [].indexOf ?
 function(arr, item) {
  return arr.indexOf(item)
 } :
 function indexOf(arr, item) {
  for (var i = 0; i < arr.length; i++) {
  if (arr[i] === item) {
   return i
  }
  }
  return -1
 }
function unique(arr) {
 var ret = []
 for (var i = 0; i < arr.length; i++) {
 var item = arr[i]
 if (indexOf(ret, item) === -1) {
  ret.push(item)
 }
 }
 return ret
}

method3

使用两重循环的另外一种比较方式,前面是将原数组的元素和结果数组一一比较,下面我们可以将原数组的重复元素的最后一个元素放入数组中

function unique(arr) {
 var ret = [];
 var len = arr.length;
 var isRepeat;
 for(var i=0; i<len; i++) {
  isRepeat = false;
  for(var j=i+1; j<len; j++) {
   if(arr[i] === arr[j]){
    isRepeat = true;
    break;
   }
  }
  if(!isRepeat){
   ret.push(arr[i]);
  }
 }
 return ret;
}

这里还有一个优化的版本

function unique(a) {
 var res = [];
 for (var i = 0, len = a.length; i < len; i++) {
 for (var j = i + 1; j < len; j++) {
  // 这一步十分巧妙
  // 如果发现相同元素
  // 则 i 自增进入下一个循环比较
  if (a[i] === a[j])
  j = ++i; //j = i = i + 1;
 }
 res.push(a[i]);
 }
 return res;
}

method4

用 javascript 中的 object 对象来当作 哈希表

function dedup(arr) {
 var hashTable = {};
 return arr.filter(function(value,index,arr){
  var key = JSON.stringify(value);
  var match = Boolean(hashTable[key]);
  return (match ? false : hashTable[key] = true);
 });
}

因为 Object 的 key 值都是 String 类型,所以对于 1 和 "1" 无法分别,我们可以稍微改进下,将类型也存入 key 中

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

总结

以上所述是小编给大家介绍的JavaScript数组去重的多种方法(四种),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS随即打乱数组实现代码
Dec 03 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
详解es6新增数组方法简便了哪些操作
May 09 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 #Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 #Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 #Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 #Javascript
vue 粒子特效的示例代码
Sep 19 #Javascript
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
慕课网题目之js实现抽奖系统功能
Sep 19 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
浅谈Python traceback的优雅处理
2018/08/31 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
自荐书范文
2013/12/08 职场文书
小区停车场管理制度
2014/01/27 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript