当前位置:首页 > 日记 > 正文

JavaScript数组去重的多种方法 | 四种

JavaScript数组去重的多种方法 | 四种

数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 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数组去重的多种方法(四种),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

bootstrap组件之按钮式下拉菜单小

bootstrap组件之按钮式下拉菜单小

下拉菜单,组件,按钮,电脑软件,bootstrap,1、单按钮下拉菜单基础的下拉菜单最外层是.dropdown的div现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单<div class="btn-group"> <button type="button" class="btn btn-default…

将angular-ui的分页组件封装成指令

将angular-ui的分页组件封装成指令

分页,组件,方法,封装,详解,准备工作:(1)一如既往的我还是使用了requireJS进行js代码的编译(2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....首先抛出几个问题:a):何时回用到分页 (当后端返回的数据过多,一页装不满时,我们必…

如何运用Excel来制作付款单

如何运用Excel来制作付款单

付款,电脑软件,Excel,  付款凭单,是一种授权付款的凭证,如果公司需要制作付款凭单,那么应该怎么利用Excel表格来完成呢?以下是小编为您带来的关于Excel制作付款单,希望对您有所帮助。Excel制作付款单1、选中第一行的前八个单元格,开始-对齐方…

excel2010无法合并单元格的解决方

excel2010无法合并单元格的解决方

合并单元格,解决方法,电脑软件,strong,  Excel中遇到单元格无法合并的问题该如何解决呢?下面是小编带来的关于excel2010无法合并单元格的解决方法,希望阅读过后对你有所启发!excel2010无法合并单元格的解决方法无法合并单元格步骤1:打开exc…

powerpoint无法放映下一页怎么办

powerpoint无法放映下一页怎么办

处理方法,下一页,幻灯片,不能播放,电脑软件,  制作完幻灯片在播放时出现问题,不能播放下一页幻灯片,遇到这种奇怪的问题该怎么办呢?有解决的方法吧?下面小编马上就告诉大家ppt不能播放下一页幻灯片的处理方法,希望看完本教程的朋友都能学会…

QQ空间说说新增定时发表功能

QQ空间说说新增定时发表功能

空间,功能,电脑软件,QQ,ldquo,  很多人都喜欢在QQ空间里面发说说,特别是别人生日的时候,但难免可能会忘记发,这时候就有一个定时发表功能,如何定时发表空间说说?下面是小编整理的一些关于QQ空间说说新增定时发表功能的相关资料,供您参考。QQ空…

ES6字符串模板,剩余参数,默认参数功

ES6字符串模板,剩余参数,默认参数功

默认参数,模板,字符串,参数,示例,本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法。分享给大家供大家参考,具体如下:这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用。先来说说字符串模板。字符串模板ES6中允许使用反引号…

javascript深拷贝的原理与实现方法

javascript深拷贝的原理与实现方法

方法,深拷贝,原理,电脑软件,javascript,本文实例讲述了javascript深拷贝的原理与实现方法。分享给大家供大家参考,具体如下:要讲JavaScript的拷贝,就得先讲讲javascript中的值传递和引用传递。javascript中没有一个具体的语法来规定哪些参数是…

excel中分列单元格的教程

excel中分列单元格的教程

教程,单元格,电脑软件,excel,  Excel中的单元格该如何分列呢?下面是由小编分享的excel中分列单元格的教程,以供大家阅读和学习。excel中分列单元格的教程:  分列单元格步骤1:打开需要分列的excel表分列单元格步骤2:选中需要分列的数据,在exc…

微信小程序 wx:for的使用实例详解

微信小程序 wx:for的使用实例详解

详解,实例,程序,电脑软件,微信小,微信小程序 wx:for的使用实例详解在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现。一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进…

excel中怎么使用记录单增加信息exc

excel中怎么使用记录单增加信息exc

使用记录,步骤,方法,电脑软件,excel,  使用Excel统计数据信息,面对信息的插入,少量数据可以直接点击表格输入数据。但是如果数据量达到2-3万条,就是拖动也需要花费一定的时间。加上如果一条数据存在多个列,导致输入过程变得更加费时。下…

关于彻底死心的个性签名

关于彻底死心的个性签名

个性签名,热门,简单,新篇,经典,  网络时代,几乎每个人都有自己的QQ号,每个QQ号都有属于自己的个性签名。表达彻底死心的个性签名有哪些?下面是彻底死心的个性签名,希望小编整理的对你有用,欢迎阅读:关于彻底死心的个性签名【经典篇】下一站,会…