快捷導(dǎo)航

JavaScript中數(shù)組雙重去重的方法總結(jié)

更新時(shí)間：2023年07月26日 09:23:46 作者：歌謠

這篇文章主要為大家學(xué)習(xí)介紹了JavaScript中數(shù)組雙重去重的幾個(gè)常用方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

方式一循環(huán)法去重

實(shí)現(xiàn)代碼

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
        function ArrayCommon(arr) {
            //判斷是不是數(shù)組  不是數(shù)組就返回一個(gè)false
            if (!Array.isArray(arr)) {
                console.log('這不是一個(gè)數(shù)組哦')
                return
            }
            //設(shè)置初始值為空數(shù)組
            var res = []
            //數(shù)組遍歷
            for (let i = 0; i < arr.length; i++) {
                //設(shè)置一個(gè)初始值
                let flag = true
                //繼續(xù)二次遍歷 如果值相同 就不放入新數(shù)組
                for (let j = 0; j < res.length; j++) {
                    if (arr[i] === res[j]) {
                        flag = false
                        break
                    }						
                }
                if (flag) {
                        res.push(arr[i])
                    }
                //當(dāng)flag1為true的時(shí)候 數(shù)組push
            }
            return res
        }
        console.log(ArrayCommon(geyao, 'geyao'))

運(yùn)行結(jié)果

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

總結(jié)

暴力去重法是一種去重方式但是復(fù)雜度上面會(huì)顯得特別的復(fù)雜雙重for循環(huán)可以優(yōu)化

方式二indexof去重

實(shí)現(xiàn)代碼

      var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
        function ArrayCommon(arr) {
            //判斷是不是數(shù)組  不是數(shù)組就返回一個(gè)false
            if (!Array.isArray(arr)) {
                console.log('這不是一個(gè)數(shù)組哦')
                return
            }
            //設(shè)置初始值為空數(shù)組
            var res = []
            //數(shù)組遍歷 
            for (let i = 0; i < arr.length; i++) {
                //只要這個(gè)值在數(shù)組中是唯一出現(xiàn)就push到新數(shù)組里面
                if(res.indexOf(arr[i])===-1){
                    res.push(arr[i])
                }     
            }
            return res
        }
        console.log(ArrayCommon(geyao, 'geyao'))

運(yùn)行結(jié)果

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

總結(jié)

通過該值為數(shù)組中的唯一下標(biāo)進(jìn)行判斷從而獲取到相應(yīng)的一個(gè)值

方式三filter去重

實(shí)現(xiàn)代碼

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
        function ArrayCommon(arr) {
            //判斷是不是數(shù)組  不是數(shù)組就返回一個(gè)false
            if (!Array.isArray(arr)) {
                console.log('這不是一個(gè)數(shù)組哦')
                return
            }
            //元素在數(shù)組中第一次出現(xiàn)的位置是否和元素現(xiàn)在的位置相等
            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'))

運(yùn)行結(jié)果

0 1 0
數(shù)組去重的第二種方式220313.html:24 1 2 1
數(shù)組去重的第二種方式220313.html:24 2 3 2
數(shù)組去重的第二種方式220313.html:24 3 4 3
數(shù)組去重的第二種方式220313.html:24 4 6 4
數(shù)組去重的第二種方式220313.html:24 5 7 5
數(shù)組去重的第二種方式220313.html:24 0 1 6
數(shù)組去重的第二種方式220313.html:24 1 2 7
數(shù)組去重的第二種方式220313.html:24 2 3 8
數(shù)組去重的第二種方式220313.html:24 9 8 9
數(shù)組去重的第二種方式220313.html:24 10 9 10
數(shù)組去重的第二種方式220313.html:30 (8) [1, 2, 3, 4, 6, 7, 8, 9]

總結(jié)

利用indexOf檢測(cè)元素在數(shù)組中第一次出現(xiàn)的位置是否和元素現(xiàn)在的位置相等，如果不等則說明該元素是重復(fù)元素

方式四先排序在對(duì)比

實(shí)現(xiàn)代碼

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判斷是不是數(shù)組  不是數(shù)組就返回一個(gè)false
      if (!Array.isArray(arr)) {
        console.log('這不是一個(gè)數(shù)組哦')
        return
      }
      //先對(duì)數(shù)組進(jìn)行排序
      arr = arr.sort()
      console.log(arr,"arr")
      //判斷相鄰得元素是不是相等 如果不相等就放進(jìn)數(shù)組里面去
      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'))

運(yùn)行結(jié)果

(11) [1, 1, 2, 2, 3, 3, 4, 6, 7, 8, 9] 'arr'
數(shù)組去重方式第四種220314.html:44 (8) [1, 2, 3, 4, 6, 7, 8, 9]

總結(jié)

通過先排序在對(duì)相鄰得元素進(jìn)行判斷獲取到對(duì)應(yīng)得數(shù)據(jù)結(jié)果

方式五對(duì)象屬性去重

實(shí)現(xiàn)代碼

  var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判斷是不是數(shù)組  不是數(shù)組就返回一個(gè)false
      if (!Array.isArray(arr)) {
        console.log('這不是一個(gè)數(shù)組哦')
        return
      }
      let res = [],
        obj = {}
        //如果對(duì)象的屬性值不存在 就放進(jìn)去 不然就賦值+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'))

運(yùn)行結(jié)果

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

總結(jié)

如果對(duì)象的屬性值不存在就放進(jìn)去不然就賦值1 否則賦值2

方式六set去重

實(shí)現(xiàn)代碼

var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判斷是不是數(shù)組  不是數(shù)組就返回一個(gè)false
      if (!Array.isArray(arr)) {
        console.log('這不是一個(gè)數(shù)組哦')
        return
      }
      return [...new Set(arr)]
    }
    console.log(ArrayCommon(geyao, 'geyao'))

運(yùn)行結(jié)果