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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
Bootstrap插件全集
Jul 18 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
js实现网页定位导航功能
Mar 07 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue移动端路由切换实例分析
May 14 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 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
php中设置index.php文件为只读的方法
2013/02/06 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
使用tensorflow实现线性回归
2018/09/08 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python:接口间数据传递与调用方法
2018/12/17 Python
如何在django中实现分页功能
2020/04/22 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
应届生自荐书
2014/06/23 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
补充协议书
2015/01/28 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
mysql知识点整理
2021/04/05 MySQL
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python