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 相关文章推荐
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
关于Promise 异步编程的实例讲解
Sep 01 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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之PHP语法学习笔记1
2006/12/17 PHP
PHP排序算法类实例
2015/06/17 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
Jquery 常用方法经典总结
2010/01/28 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
高中生活自我鉴定
2014/01/18 职场文书
留学自荐信写作方法
2014/01/27 职场文书
语文教学感言
2014/02/06 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
婚礼父母致辞
2015/07/28 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android