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