JavaScript數組去重總結

目錄

1. indexOf判斷去重
2. sort排序後去重
3. for+for+splice去重
4. Array.form+Set去重（ES6經常使用）
5. [...new Set(arr)]
6. 利用對象的屬性不能相同
7. 利用reduce+includes

---

一、for循環+indexOf

1.1 數組遍歷-最直觀，最好理解

建立一個新數組newArr，遍歷arr的過程當中，利用indexOf判斷當前數字在新數組是否已存在，不存在就放如newArr，若是存在了就不處理，繼續遍歷。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]

1.2 判斷數組下標

這個方法與第一個方法相似，仍是利用indexOf，區別是使用的是indexOf返回首次出現的位置。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
var newArr = []
for (var i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) === i) {
        newArr.push(arr[i])
    }
}
console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]

相似上面的，還能夠使用includes、filter等。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
var newArr =[];
for(var i = 0; i < arr.length; i++) {
    if(!newArr.includes( arr[i])) {//includes 檢測數組是否有某個值
        newArr.push(arr[i]);
    }
}
console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]

 

二、sort排序後去重

用到了sort排序。排序後，重複的數字挨在一塊兒，先後比較，把不相同的放入新數組newArr裏面。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
arr.sort()
var newArr = [arr[0]]
for (var i = 1; i < arr.length; i++) {
    if (arr[i] !== newArr[newArr.length - 1]) {
        newArr.push(arr[i])
    }
}
console.log(newArr) // 結果：[0, 2, 5, 6, 7, 8]

 

三、for+for+splice去重

雙層for循環嵌套+splice刪除重複的後一項。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
for(var i=0; i<arr.length; i++){
    for(var j=i+1; j<arr.length; j++){
        if(arr[i]==arr[j]){ //第一個等同於第二個，splice方法刪除第二個
            arr.splice(j,1);
            j--;
        }
    }
}
console.log(arr) // 結果：[2, 8, 5, 0, 6, 7]

 

四、Array.form+Set去重（ES6經常使用）

ES6的方法，代碼少，很好用，缺點是不能識別對象。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
let newArr = Array.from(new Set(arr))
console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]

 

五、[...new Set(arr)]

第四種方法的簡化。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
let newArr = [...new Set(arr)] 
console.log(newArr) // 結果：[0, 2, 5, 6, 7, 8]

 

六、利用對象的屬性不能相同

 6.1定義一個對象obj，以arr的值爲obj的key，判斷key是否已經存在。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
var newArr =[];
var obj = {}
for(var i = 0; i < arr.length; i++) {
    if(!obj[arr[i]]) {//以arr的值爲obj的key
        newArr.push(arr[i]);
        obj[arr[i]] = 1
    }
}
console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]

6.2利用hasOwnProperty，與利用對象原理相同。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
var obj = {}
var newArr = []
for(item of arr) {
    if (obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)) {
        newArr.push(item)
    }
}
console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]

 

 七、利用reduce+includes

利用reduce累加器，其原理相似for+includes。

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
var newArr = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]

 

---

參考

1. js數組去重五種方法
2. JavaScript數組去重（12種方法，史上最全）
3. JavaScript數組去重—ES6的兩種方式
4. ES6