JavaScript数组去重的多种解法（多达11种）

野性酷女 2023-06-26 15:30 10阅读 0赞

## JavaScript的数组去重在我们的日常开发中可谓是非常常见的问题，那么问题来了？大家都喜欢用什么方法解决数组去重问题呢？ ##

#### 1、对象去重法 ####

我最开始学习的JS的时候使用的一种方法，这种方法可能初学者最先想到的解法，因为根据object对象的属性如果相同则会覆盖，从而能够进行判断使用存在相同元素。

### 2、使用indexOf去重 ###

indexOf去重的方法原理也很简单，只是根据数组的下标进行判断，如果存的数组中存在这个元素说明该元素已经存在即重复，所以不需要进行存取。

### 3、使用 indexOf 和 索引值进行判断 ###

也是用到indexOf进行判断，根据indexOf取得下标与当前的索引值进行判断，如果下标值与索引值不相等，那么说明存在了重复元素，去掉即可。

### 4、使用lastIndexOf 和 索引值进行判断 ###

原理和上一个类似，但是使用方法相反

### 5、循环对比两两数 ###

使用一层循环进行判断相邻两个数是否重复（提前对数组进行排序），如果重复则去掉

### 6、使用数组的includes方法（ES6新方法） ###

使用includes方法在暂存的数组中进行判断是否存在，如果存在则不需要添加

### 7、使用数组的filter函数+indexOf判断 ###

运用数组的filter方法进行遍历，然后也是对indexOf的索引值进行判断

const unique = (arr) => {        
                return arr.filter((item, index, _arr) => {            
                    return _arr.indexOf(item) === index;        
                })    
            }

### 8、splice去重 ###

通过数组的splice方法直接在原数组上进行修改，需要注意的是如果不需要改变原数组的话那么需要进行一份拷贝，然后在是要该方法即可

### 9、使用Map数据结构去重 ###

根据Map的不可重复性可以进行去重操作，但是就是需要一定的内存损耗。

### 10、使用reduce去重（ES6新方法） ###

代码简洁，如果不熟悉reduce方法的小伙伴可以去看看学学这个方法的使用，这个方法如果用的好的话确实有很大用处。

const unique = (arr) => {
            return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
        }

### 11、使用Set数据结构去重 ###

这个可能是学习了ES6之后的常用去重方法了，简单便捷，易于使用，代码量小

const unique = (arr) => {
            return [...new Set(arr)];
        }

如果需要去重复杂数组的话如这种结构也可以使用Set结构进行去重

let arr = [1, {a: 1, b: 2}, [1, 2, 3], {a: 1, b: 2}, [1, 2, 3]
    const unique = (arr) => {
            return [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
        }

以上代码均只适用于简单的数组去重操作

### 写在最后 ###

因为方法比较多，所以大家可以根据不同的场景来使用不同的方法，比如常常需要考虑的是时间复杂度和空间复杂度。根据不同的需要进行选择，以时间换空间还是以空间换时间。

### 希望大家都能有所收获! 还有不懂的知识点啊，赶紧学起来！ ###