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过滤选择器:not()方法使用介绍
Apr 20 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
javascript函数式编程基础
Sep 15 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数据缓存技术
2007/02/14 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
js里的prototype使用示例
2010/11/19 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
新闻记者个人求职的自我评价
2013/11/28 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
阿德的梦教学反思
2014/02/06 职场文书
档案室主任岗位职责
2014/02/12 职场文书
工作目标责任书
2014/07/23 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android