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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
js返回顶部实例分享
Dec 21 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
js实现缓动动画
2020/11/25 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python实现泊松图像融合
2018/07/26 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python如何读写CSV文件
2020/08/13 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
领导班子作风建设年个人整改措施
2014/09/29 职场文书
幸福来敲门观后感
2015/06/04 职场文书
公司职员入党自传书
2015/06/26 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers