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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
九种原生js动画效果
Nov 11 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
JavaScript实现下拉列表
Jan 20 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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中var_dump方法的使用详解
2013/06/24 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
浅谈python中的占位符
2017/11/09 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Python单元测试与测试用例简析
2019/11/09 Python
python可视化text()函数使用详解
2020/02/11 Python
python3.4中清屏的处理方法
2020/07/06 Python
django form和field具体方法和属性说明
2020/07/09 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
自我鉴定书面格式
2014/01/13 职场文书
《恐龙》教学反思
2014/04/27 职场文书
员工辞职信范文
2015/03/02 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android