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数组双重去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript Array.prototype.slice使用说明

    javascript Array.prototype.slice使用说明

    slice 可以用来获取数组片段,它返回新数组,不会修改原数组。
    2010-10-10
  • JavaScript 箭头函数的特点、与普通函数的区别

    JavaScript 箭头函数的特点、与普通函数的区别

    这篇文章主要介绍了JavaScript 箭头函数的特点、与普通函数的区别,很多情况下,箭头函数和函数表达式创建的函数并无区别,只有写法上的不同,本文第二块内容将介绍箭头函数和普通函数功能上的区别,感兴趣的朋友跟随小编一起看看吧
    2021-11-11
  • JS实现移动端判断上拉和下滑功能

    JS实现移动端判断上拉和下滑功能

    通过手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑。接下来通过实例代码给大家介绍js移动端判断上拉和下滑功能,感兴趣的朋友一起看看吧
    2017-08-08
  • JavaScript判断对象、数组是否包含某个属性、某个值的方法

    JavaScript判断对象、数组是否包含某个属性、某个值的方法

    这篇文章主要给大家介绍了关于JavaScript判断对象、数组是否包含某个属性、某个值的相关资料,我们在实际的开发过程中,经常需要判断对象/数组是否包含某个属性或者某个值,需要的朋友可以参考下
    2023-09-09
  • javascript cookie操作类的实现代码小结附使用方法

    javascript cookie操作类的实现代码小结附使用方法

    javascript cookie操作类的实现代码小结附使用方法,对于cookies操作不是很熟悉的朋友可以参考下。
    2010-06-06
  • 以BootStrap Tab为例写一个前端组件

    以BootStrap Tab为例写一个前端组件

    本文以Bootstrap标签页组件为例,介绍如何编写或者封装一个前端组件,具体示例代码大家参考下本文
    2017-07-07
  • JS自定义函数实现时间戳转换成date的方法示例

    JS自定义函数实现时间戳转换成date的方法示例

    这篇文章主要介绍了JS自定义函数实现时间戳转换成date的方法,结合具体实例形式分析了javascript时间戳与日期格式的计算与转换相关操作技巧,需要的朋友可以参考下
    2017-08-08
  • javascript实现倒计时关闭广告

    javascript实现倒计时关闭广告

    这篇文章主要为大家详细介绍了javascript实现倒计时关闭广告,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • Echarts 3D散点图实战案例

    Echarts 3D散点图实战案例

    这篇文章主要给大家介绍了关于Echarts 3D散点图的相关资料, Echarts散点图是一种常用的数据可视化图表类型,用于展示两个或多个维度的数据分布情况,需要的朋友可以参考下
    2023-11-11
  • js实现倒计时关键代码

    js实现倒计时关键代码

    这篇文章主要为大家详细介绍了js实现倒计时的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论