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 相关文章推荐
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
微信小程序删除处理详解
Aug 16 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php类常量的使用详解
2013/06/08 PHP
php的ajax简单实例
2014/02/27 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python中的多重装饰器
2015/04/11 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python中Django文件上传方法详解
2020/08/05 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
30年同学聚会感言
2014/01/30 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
个人四风问题整改措施
2014/10/24 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Python极值整数的边界探讨分析
2021/09/15 Python