面试题之数组的去重方式

前言

平时我们在做开发或者面试的过程中，经常会碰到这样的问题：给我们一组重复的数据，要求把重复的数据去掉，如果是你，你会用哪些方式来去重呢？接下来我们就一起来看看去重的方式吧。

方式一：利用includes方法

includes()方法的意思：查找元素在数组中是否存在，存在则返回true，不存在则回false

// arr是我们的原始数组
var arr = [1, 2, 2, 3, 3, 4, 2, 3]
// new_arr是我们的新数组，存放去重之后的数据
var new_arr = []
// 利用for循环遍历数组
for (var i = 0; i < arr.length; i++) {
    // 检测新数组中是否包含这条数据，如果不包含，则追加进去。
    if (!new_arr.includes(arr[i])) {
        new_arr.push(arr[i])
    }
}
console.log(new_arr);// [1, 2, 3, 4]
1
2
3
4
5
6
7
8
9
10
11
12

方式二：利用Set()方式去重

这是es6新增的去重方式

var arr = [1, 2, 2, 3, 3, 4, 2, 3]
// result保存的就是去重之后的结果
var result = new Set(arr)
console.log(result);// Set(4) {1, 2, 3, 4}
1
2
3
4

从上面代码中可以看到用new Set()去重之后的结果是一个对象，那么接下来我们就需要把对象转成一个数组了。

转换方式一：利用展开运算符，将提取到的数据直接放入到数组中。

var new_arr = [...result]
console.log(new_arr);//[1, 2, 3, 4]
1
2

转换方式二：利用Array.from()的方式

Array.from()方法的意思：将拥有length属性的对象或者可迭代的对象来返回一个数组。

var new_arr = Array.from(result);
console.log(new_arr);//[1, 2, 3, 4]
1
2

方式三：利用indexOf()方法

indexOf()方法的意思：查找元素对应的下标，如果能找到元素，则返回元素的下标，找不到则返回-1.

var arr = [1, 2, 2, 3, 3, 4, 2, 3]
var new_arr = []
// 遍历原始数组
for (var i = 0; i < arr.length; i++) {
    // 如果返回-1则证明新数组中没有这条数据，那么就追加进去
    if (new_arr.indexOf(arr[i]) == -1) {
        new_arr.push(arr[i])
    }
}
console.log(new_arr);
1
2
3
4
5
6
7
8
9
10

方式四：双重for和splice()方法结合

splice()方法的意思：删除或者添加元素。这个方法会改变原数组。

var arr = [1, 2, 2, 3, 3, 4, 2, 3]
for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) 
        if (arr[i] == arr[j]) {
            arr.splice(j, 1)
            j--
        }
    }
}
console.log(arr);
1
2
3
4
5
6
7
8
9
10

这段代码的核心思想就是先拿一个元素一直和后面的元素比较，如果一致则证明重复，就利用splice()方法将这个元素删除，删掉之后下标会受影响，所以要j–再向前退一个下标。

方式五：利用sort()和reduce()的结合

sort():排序，会改变原数组。

reduce():让数组中的每一个元素依次执行回调函数。

先进行排序，排序好之后再使用reduce进行对比。

var arr = [1, 2, 2, 3, 3, 4, 2, 3, 1]
// 先进行排序，会改变原数组
arr.sort();
// 新数组中先存入原始数组中的第一条数据
var new_arr = [arr[0]]
// prev是前一个元素，next是下一个元素
arr.reduce((prev, next) => {
    // 如果前一个和下一个不相等，就追加到新数组中
    if (prev !== next) {
        new_arr.push(next)
    }
    return next
})
console.log(new_arr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方式六：foreach和map()方式

foreach：遍历数组的

map：集合

var arr = [1, 2, 2, 3, 3, 4, 2, 3, 1]
var map = new Map()
var new_arr = []
arr.forEach(item => {
    // 判断如果元素不在map集合中，就添加到map和新数组中
    if (!map.has(item)) {
        map.set(item, true)
        new_arr.push(item)
    }
})
console.log(new_arr);
1
2
3
4
5
6
7
8
9
10
11

方式七：reduce()和includes()

var arr = [1, 2, 2, 3, 3, 4, 2, 3, 1]
var result = arr.reduce((newArr, next) => {
    if (!newArr.includes(next)) {
        newArr.push(next)
    }
    return newArr
}, [])
console.log(result);
1
2
3
4
5
6
7
8