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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vue.js封装switch开关组件的操作
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
使用adodb lite解决问题
2006/12/31 PHP
php 获取客户端的真实ip
2009/11/30 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python3 简单实现组合设计模式
2020/07/02 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
马智宇结婚主持词
2014/04/01 职场文书
会计稽核岗位职责
2015/04/13 职场文书
element多个表单校验的实现
2021/05/27 Javascript
一文搞懂python异常处理、模块与包
2021/06/26 Python
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android