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 学习 几种常用方法
Jun 11 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
用jquery来定位
2007/02/20 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python3 socket同步通信简单示例
2017/06/07 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python实战教程之自动扫雷
2018/07/13 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
办公室文秘自我评价
2013/09/21 职场文书
航空学院求职信
2014/06/11 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
2016年情人节广告语
2016/01/28 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
java设计模式--原型模式详解
2021/07/21 Java/Android