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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js表单登陆验证示例
Oct 19 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
yii中widget的用法
2014/12/03 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
java直接调用python脚本的例子
2014/02/16 Python
Python的设计模式编程入门指南
2015/04/02 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python实现字符串和数字拼接
2020/03/02 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
比较基础的php面试题及答案-填空题
2014/04/26 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
毕业生自我推荐
2013/11/04 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
《鲸》教学反思
2016/02/23 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸