JavaScript数组去重的多种方法(四种)

 更新时间:2017年09月19日 09:08:49   投稿:mrr  
数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。下面脚本之家小编给大家带来了js数组去重的多种方法,非常不错,需要的朋友参考下

数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 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 事件处理程序介绍

    javascript 事件处理程序介绍

    javascript 事件处理程序介绍,学习js的朋友可以参考下
    2012-06-06
  • 一段非常简单的js判断浏览器的内核

    一段非常简单的js判断浏览器的内核

    先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断。
    2014-08-08
  • 使用JS解析excel文件的完整实现步骤

    使用JS解析excel文件的完整实现步骤

    解析excel文件是我们日常开发中经常遇到的一个需求,下面这篇文章主要给大家介绍了关于使用JS解析excel文件的完整实现步骤,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • Javascript多种浏览器兼容写法分析

    Javascript多种浏览器兼容写法分析

    随着以Firefox为代表的第三方浏览器的兴起,我们做的网站也不能再JUST IE了,如果把原来的一些javascript代码放到IE以外的浏览器的话,往往都不能正常运行或出错,所以这里介绍一下怎么改进我们的JS,让它能更加规范,更加具有兼容性。
    2008-09-09
  • 用js判断是否为360浏览器的实现代码

    用js判断是否为360浏览器的实现代码

    这篇文章主要介绍了用js判断是否为360浏览器的实现代码,有时候我们需要判断是否为360浏览器,包括百度联盟后台就有这样的提示需要的朋友可以参考下
    2015-01-01
  • 详解javascript实现瀑布流绝对式布局

    详解javascript实现瀑布流绝对式布局

    这篇文章主要介绍了javascript实现瀑布流的两种布局方式,一是绝对式布局、二是列式布局,详细介绍了这两种布局方式的原理,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Ionic默认的Tabs模板使用实例

    Ionic默认的Tabs模板使用实例

    这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • mui 打开新窗口的方式总结及注意事项

    mui 打开新窗口的方式总结及注意事项

    这篇文章主要介绍了mui 打开新窗口的方式总结及注意事项,需要的朋友可以参考下
    2017-08-08
  • JS实现可用滑块滑动的缓动图代码

    JS实现可用滑块滑动的缓动图代码

    这篇文章主要介绍了JS实现可用滑块滑动的缓动图代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • js下将金额数字每三位一逗号分隔

    js下将金额数字每三位一逗号分隔

    这篇文章主要介绍了js下将金额数字每三位一逗号分隔的相关资料,还附加了一个小功能,小数位保留两位,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论