JavaScript中数组去重的5种方法

 更新时间:2020年07月04日 09:10:27   作者:老甄Home  
这篇文章主要介绍了JavaScript中数组去重的5种方法,文中讲解非常详细,实例代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下

正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀。现在我总结了一些去重的方法,希望对大家有点帮助。

方法一:new Set()实现数组去重

ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set 本身是一个构造函数,用来生成 Set 数据结构。Set函数可以接受一个数组,用于初始化。根据 Set的数据特性,我们可以实现数组去重。

let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
let list1 = Array.from(new Set(list)); // [ 1, "a", true, false, null, "", undefined ]
let list2 = [...new Set(list)]; // [ 1, "a", true, false, null, "", undefined ]

方法二:some()+循环去重

some() 方法用于检测数组中的元素是否满足指定条件(函数提供) 。 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素,则返回false。 我们可以定义一个新数组来承接没有重复的数据,遍历原始数组的时候,用新数组来判断数据是否已经出现过。

 function distinct(list) {
   let result = [list[0]];// 用于承接没有重复的数据,初始时将原始数组的第一个值赋给它。
   for (let i = 1; i < list.length; i++) {
     // 判断结果数组中是否存在一样的值,若果没有的话则将数据存入结果数组中。
     if (!(result.some(val => list[i] === val))) {
       result.push(list[i]);
     }
   }
   return result;
 }
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct(arr); // [ 1, "a", true, false, null, "", undefined ]

方法三:双重for循环去重

双重for循环,第一层循环确保数组中的每一项都能被比较,第二层循环确保被比较项后的每一项都能跟被比较项比较。

function distinct2(list) {
  for (let i = 0; i < list.length; i++) {
    for (let j = i + 1; j < list.length; j++) {
      // 后面数据的若跟前一项数据相同,则重复,需要去除。
      if (list[i] === list[j]) {
        list.splice(j, 1); // 去除后面的相同项
        j--;
      }
    }
  }
  return list;
}
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]

方法四:hasOwnProperty()方法去重

hasOwnProperty() 方法用来检测一个属性是否是对象的自有属性,而不是从原型链继承的。如果该属性是自有属性,那么返回 true,否则返回 false。

function unique(arr) {
 var obj = {}; // 用来记录数组中的数据
 return arr.filter(function(item, index, arr){
   // 如果记录对象中存在某个数据,则返回false过滤掉;否则obj进行记录并筛选出来
   return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
 })
}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
unique(arr) // [ 1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]

方法五:利用filter()+indexOf()方法去重

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

function unique(arr) {
 return arr.filter(function(item, index, arr) {
  // 从数组0位开始查,如果当前元素在原始数组中的第一个索引==当前索引值,说明它是第一次出现。
  return arr.indexOf(item, 0) === index;
 });
}
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
unique(list); // [ 1, "a", true, false, null, "", undefined ]

此外,数组去重还可以利用filter()、includes()等方法实现,但是思路都跟上面几种方法类似,这里就不一一列举了。

以上就是JavaScript中数组去重的5种方法的详细内容,更多关于JavaScript中数组去重的资料请关注脚本之家其它相关文章!

相关文章

  • 使用postMesssage()实现跨域iframe页面间的信息传递方法

    使用postMesssage()实现跨域iframe页面间的信息传递方法

    下面小编就为大家带来一篇使用postMesssage()实现跨域iframe页面间的信息传递方法。小编觉得挺不错的,现在分享给大家,也给大家一个参考。一起跟随小编过来看看吧
    2016-03-03
  • 一篇文章弄懂javascript中的执行栈与执行上下文

    一篇文章弄懂javascript中的执行栈与执行上下文

    这篇文章主要给大家介绍了关于javascript中执行栈与执行上下文的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • javascript实现数字时钟效果

    javascript实现数字时钟效果

    这篇文章主要为大家详细介绍了javascript实现数字时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • chrome浏览器如何断点调试异步加载的JS

    chrome浏览器如何断点调试异步加载的JS

    chrome浏览器不仅仅可以用来上网,对于开发人员来说,它更像是一款强大的开发辅助工具。今天这篇文章给大家分享在chrome浏览器如何断点调试异步加载的JS,有需要的可以参考借鉴。
    2016-09-09
  • JS限制输入框输入的实现代码

    JS限制输入框输入的实现代码

    这篇文章主要介绍了JS限制输入框输入的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • JavaScript实现自动生成带水印的图片

    JavaScript实现自动生成带水印的图片

    这篇文章主要来和大家一起讨论如何利用JavaScript实现一个复杂功能,该功能可以自动为图片添加水印,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • JavaScript实现全选和全不选操作

    JavaScript实现全选和全不选操作

    这篇文章主要为大家详细介绍了JavaScript实现全选和全不选操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • stream.js 一个很小、完全独立的Javascript类库

    stream.js 一个很小、完全独立的Javascript类库

    stream.js 是一个很小、完全独立的Javascript类库,它为你提供了一个新的Javascript数据结构:streams
    2011-10-10
  • 多个jquery.datatable共存,checkbox全选异常的快速解决方法

    多个jquery.datatable共存,checkbox全选异常的快速解决方法

    这篇文章主要介绍了多个jquery.datatable共存,checkbox全选异常的快速解决方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 判断用户的在线状态 onbeforeunload事件

    判断用户的在线状态 onbeforeunload事件

    window.event.clientX和window.event.clientY 将捕捉当前事件发生时鼠标相对与窗口的桌面坐标,通常情况下IE的关闭按钮都会在页面的右上部分,所以点关闭的时候鼠标的坐标的Y坐标一定是小于0的
    2011-03-03

最新评论