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 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
python标准库OS模块详解
2020/03/10 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
什么是设计模式
2012/06/17 面试题
应用心理学个人求职信范文
2013/12/11 职场文书
车队司机自我鉴定
2014/03/02 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
店长岗位职责
2015/02/11 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书