6種數組去重的方法

1. 使用雙重for循環

要比較數組中的每個值咱們均可以用雙重for循環來解決，好比冒泡排序。
一樣也能夠使用雙重for循環來數組去重。
[JavaScript] 純文本查看 複製代碼
?

function unique(arr) {

for (let i = 0; i < arr.length; i++) {

for (let j = i+1; j < arr.length; j++) {

  if (arr == arr[j]) {

    arr.splice(j,1)

    j--

  }

}

}

return arr

}

let arr = [1,1,'true','true', 'a', 'a',true,true,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0,{},{},[],[]];

console.log(unique(arr)) // [ 1, 'true', 'a', false, undefined, NaN, NaN, 'NaN', {}, {} ]

能夠看見NaN沒有被去除掉，兩個{}都沒去掉，由於{}是引用值，而卻咱們使用的是arr == arr[j]會發生類型轉換，因此如下都爲true：

[JavaScript] 純文本查看 複製代碼
?

1 == true

false== []

undefined == null

false == 0

要解決以上問題咱們能夠使用Object.is(arr, arr[j])的方法替換arr==arr[j]既能夠去除NaN還能夠防止發生類型轉換。
代碼這裏接不貼出了，你們能夠本身寫一下運行一下。
注：爲了方便如下arr都使用該處的arr值

1. 利用indexOf()

使用indexOf()，能夠判斷一個數組中是否包含某個值，若是存在則返回該元素在數組中的位置，若是不存在則返回-1。
[JavaScript] 純文本查看 複製代碼
?

functon unique(arr) {

let res = []

      for (let i = 0; i < arr.length; i++) {

    if (res.indexOf(arr) === -1) {

              res.push(arr)

    }

      }

      return res

}

console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, NaN, NaN, 'NaN', 0, {}, {}, [], []]

這裏咱們新建一個數組來保存去重後的數組，若是該數組不包含元素就將該元素push到該數組中，能夠發現這種方法任然沒有去掉NaN、{}、[]。

1. 利用includes()

使用includes()方法也能夠判斷數組是否包含某個特定的元素，若是包含就返回true不包含就返回false。這和indexOf()方法有些相似，因此咱們使用includes()進行數組去重和indexOf()的方法原理是同樣的。
[JavaScript] 純文本查看 複製代碼
?

functon unique(arr) {

let res = []
for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr)) {
              res.push(arr)
    }
}
return res

}

1. 利用filter()

filter() 方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。
而且filter()不會改變數組，也不會對空數組進行檢測。filter()方法接收一個回調函數。
語法：
[JavaScript] 純文本查看 複製代碼
?
1
array.filter(function(item,index,arr), thisValue)

參數 描述
item 必須。當前元素的值
index 可選。當前元素的索引值
arr 可選。當前元素屬於的數組對象

代碼實現
[JavaScript] 純文本查看 複製代碼
?

function unique(arr) {

return arr.filter((item,index, arr) => {
    return arr.indexOf(item) === index
})

}
console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, 'NaN', 0, {}, {}, [], [] ]

這裏咱們用判斷indexOf(item)判斷當前元素的索引是否等於當前index，若是相等就返回該元素。

1. 使用對象的特色

對象是一種以鍵值對存儲信息的結構，而且不能有重複的鍵。
[JavaScript] 純文本查看 複製代碼
?

function unique(arr) {
let obj = {}
for (let i = 0; i < arr.length; i++) {

if (arr in obj) {
  obj[arr] ++
} else {
  obj[arr] = 10
}

}
return Object.keys(obj) // 以數組的形式返回鍵
}
console.log(unique(arr)) // [ '0', '1', 'true', 'a', 'false', 'undefined', 'null', 'NaN', '[object Object]', '']

這種方法的寫出來有點問題，由於是用Object.keys(obj)來返回鍵的集合因此獲得的都是字符串的形式。

1. 使用set

ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。
[JavaScript] 純文本查看 複製代碼
?

function unique(arr) {
return [...new Set(arr)]
}
console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, NaN, 'NaN', 0, {}, {}, [], [] ]

這是ES6最經常使用的方法，獲得的效果也還不錯。更多技術資訊可關注：gzitcast