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 相关文章推荐
对于this和$(this)的个人理解
Sep 08 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
微信小程序上线发布流程图文详解
May 06 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
pycharm远程调试openstack代码
2017/11/21 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
python中time、datetime模块的使用
2020/12/14 Python
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
项目副经理岗位职责
2013/12/30 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
入股合作协议书
2014/10/12 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL