JavaScript中数组双重去重的方法总结

 更新时间:2023年07月26日 09:23:46   作者:歌谣  
这篇文章主要为大家学习介绍了JavaScript中数组双重去重的几个常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

方式一循环法去重

实现代码

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
        function ArrayCommon(arr) {
            //判断是不是数组  不是数组就返回一个false
            if (!Array.isArray(arr)) {
                console.log('这不是一个数组哦')
                return
            }
            //设置初始值为空数组
            var res = []
            //数组遍历
            for (let i = 0; i < arr.length; i++) {
                //设置一个初始值
                let flag = true
                //继续二次遍历 如果值相同 就不放入新数组
                for (let j = 0; j < res.length; j++) {
                    if (arr[i] === res[j]) {
                        flag = false
                        break
                    }						
                }
                if (flag) {
                        res.push(arr[i])
                    }
                //当flag1为true的时候 数组push
            }
            return res
        }
        console.log(ArrayCommon(geyao, 'geyao'))

运行结果

 [1, 2, 3, 4, 6, 7, 8, 9]

总结

暴力去重法是一种去重方式 但是复杂度上面会显得特别的复杂 双重for循环可以优化

方式二indexof去重

实现代码

      var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
        function ArrayCommon(arr) {
            //判断是不是数组  不是数组就返回一个false
            if (!Array.isArray(arr)) {
                console.log('这不是一个数组哦')
                return
            }
            //设置初始值为空数组
            var res = []
            //数组遍历 
            for (let i = 0; i < arr.length; i++) {
                //只要这个值在数组中是唯一出现就push到新数组里面
                if(res.indexOf(arr[i])===-1){
                    res.push(arr[i])
                }     
            }
            return res
        }
        console.log(ArrayCommon(geyao, 'geyao'))

运行结果

[1, 2, 3, 4, 6, 7, 8, 9]

总结

通过该值为数组中的唯一下标进行判断 从而获取到相应的一个值

方式三filter去重

实现代码

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
        function ArrayCommon(arr) {
            //判断是不是数组  不是数组就返回一个false
            if (!Array.isArray(arr)) {
                console.log('这不是一个数组哦')
                return
            }
            //元素在数组中第一次出现的位置是否和元素现在的位置相等
            return Array.prototype.filter.call(arr,function(item,index){
                console.log(arr.indexOf(item),item,index)
                return arr.indexOf(item)===index
            })
        }
        console.log(ArrayCommon(geyao, 'geyao'))

运行结果

0 1 0
数组去重的第二种方式220313.html:24 1 2 1
数组去重的第二种方式220313.html:24 2 3 2
数组去重的第二种方式220313.html:24 3 4 3
数组去重的第二种方式220313.html:24 4 6 4
数组去重的第二种方式220313.html:24 5 7 5
数组去重的第二种方式220313.html:24 0 1 6
数组去重的第二种方式220313.html:24 1 2 7
数组去重的第二种方式220313.html:24 2 3 8
数组去重的第二种方式220313.html:24 9 8 9
数组去重的第二种方式220313.html:24 10 9 10
数组去重的第二种方式220313.html:30 (8) [1, 2, 3, 4, 6, 7, 8, 9]

总结

利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等,如果不等则说明该元素是重复元素

方式四先排序在对比

实现代码

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判断是不是数组  不是数组就返回一个false
      if (!Array.isArray(arr)) {
        console.log('这不是一个数组哦')
        return
      }
      //先对数组进行排序
      arr = arr.sort()
      console.log(arr,"arr")
      //判断相邻得元素是不是相等 如果不相等就放进数组里面去
      let res = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
          res.push(arr[i])
        }
      }
      return res
    }
    console.log(ArrayCommon(geyao, 'geyao'))

运行结果

(11) [1, 1, 2, 2, 3, 3, 4, 6, 7, 8, 9] 'arr'
数组去重方式第四种220314.html:44 (8) [1, 2, 3, 4, 6, 7, 8, 9]

总结

通过先排序在对相邻得元素进行判断获取到对应得数据结果

方式五对象属性去重

实现代码

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判断是不是数组  不是数组就返回一个false
      if (!Array.isArray(arr)) {
        console.log('这不是一个数组哦')
        return
      }
      let res = [],
        obj = {}
        //如果对象的属性值不存在 就放进去 不然就赋值+1
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            res.push(arr[i])
            obj[arr[i]] = 1
            console.log( obj[arr[i]],"obj[arr[i]]")
        } else {
            obj[arr[i]]++
            console.log( obj[arr[i]],"obj[arr[j]]")
        }
    }
    return res
    }
    console.log(ArrayCommon(geyao, 'geyao'))

运行结果

[1, 2, 3, 4, 6, 7, 8, 9]

总结

如果对象的属性值不存在 就放进去 不然就赋值1 否则赋值2

方式六set去重

实现代码

var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判断是不是数组  不是数组就返回一个false
      if (!Array.isArray(arr)) {
        console.log('这不是一个数组哦')
        return
      }
      return [...new Set(arr)]
    }
    console.log(ArrayCommon(geyao, 'geyao'))

运行结果

[1, 2, 3, 4, 6, 7, 8, 9]

总结

通过new set直接进行去重了

到此这篇关于JavaScript中数组双重去重的方法总结的文章就介绍到这了,更多相关JavaScript数组双重去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序的mpvue框架快速上手指南

    微信小程序的mpvue框架快速上手指南

    mpvue 是一个使用 Vue.js 开发小程序的前端框架。这篇文章主要介绍了小程序的mpvue框架 ,需要的朋友可以参考下
    2019-05-05
  • uniapp实现滚动触底加载项目实战

    uniapp实现滚动触底加载项目实战

    这篇文章主要为大家介绍了uniapp实现滚动触底加载项目实战方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • HTML+CSS+JavaScript实现简单日历效果

    HTML+CSS+JavaScript实现简单日历效果

    这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现简单日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Highcharts使用简例及异步动态读取数据

    Highcharts使用简例及异步动态读取数据

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,通过本文给大家介绍Highcharts使用简例及异步动态读取数据的相关知识,感兴趣的朋友一起学习吧
    2015-12-12
  • TypeScript入门-基本数据类型

    TypeScript入门-基本数据类型

    本文主要介绍了TypeScript基本数据类型的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • Javascript将JSON日期格式化

    Javascript将JSON日期格式化

    在做项目中,将实体转化为JSON后,结果后台返回json时间格式为/Date(1306418993027)/,在前台JS里显示的并不是真正的日期,而且我们不能把所有日期字段都变成string吧,因此写了Javascript的扩展方法,来实现这个功能,代码如下
    2016-08-08
  • 利用Axios实现无感知双Token刷新的详细教程

    利用Axios实现无感知双Token刷新的详细教程

    在现代系统中,Token认证已成为保障用户安全的标准做法,然而,尽管许多系统采用了这种认证方式,却在处理Token刷新方面存在不足,导致用户体验不佳,许多系统未能提供一种无缝的、用户无感知的Token刷新机制,所以本文介绍了教你用Axios实现无感知双Token刷新
    2024-08-08
  • 一个效果写的HashTable代码

    一个效果写的HashTable代码

    一个效果写的HashTable代码...
    2007-03-03
  • JavaScript中json对象和string对象之间相互转化

    JavaScript中json对象和string对象之间相互转化

    json对象和string对象之间的转化已经成为了大家耳熟能详的话题,本人今天就多啰嗦一些他们之间的故事,如有不对之处,还请各位海涵呢?不多说了直切主题
    2012-12-12
  • Bootstrap图片轮播效果详解

    Bootstrap图片轮播效果详解

    这篇文章主要为大家详细介绍了Bootstrap图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论