JavaScript数组去重的多种解法(多达11种)

604 阅读3分钟

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


1、对象去重法

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

const unique = (arr) => {        
            let map = {};        
            let res = [];        
            for (let i = 0; i < arr.length; i++) {            
                if (!map[arr[i]]) {                
                    map[arr[i]] = 1;                
                    res.push(arr[i]);            
                 }        
            }        
            return res;    
        }


2、使用indexOf去重

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

const unique = (arr) => {        
            let res = [];        
            for (let i = 0; i < arr.length; i++) {            
                if (res.indexOf(arr[i]) < 0) {                
                    res.push(arr[i]);            
                }        
            }        
            return res;    
        }


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

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

const unique = (arr) => {        
            let res = [];        
            for (let i = 0; i < arr.length; i++) {            
                if (arr.indexOf(arr[i]) == i) {                
                    res.push(arr[i]);            
                }        
            }        
            return res;    
        }


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

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

const unique = (arr) => {        
            let res = [];        
            for (let i = 0; i < arr.length; i++) {            
                if (arr.lastIndexOf(arr[i]) == i) {                
                    res.push(arr[i]);            
                }        
            }        
            return res;    
        }


5、循环对比两两数

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

const unique = (arr) => {        
            let res = [];        
            // 需要先排序        
            arr.sort((a, b) => a - b);        
            res[0] = arr[0];        
            for (let i = 1; i < arr.length; i++) {            
                if (arr[i] !== arr[i - 1]) {                
                    res.push(arr[i]);            
                }        
            }        
            return res;    
        }


6、使用数组的includes方法(ES6新方法)

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

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


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

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

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


8、splice去重

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

const unique = (arr) => {        
            arr.sort((a, b) => a - b);        
            for (let i = 0; i < arr.length - 1; i++) {
            if (arr[i + 1] === arr[i]) {
                arr.splice(i, 1);
                i--;
            }
        }
        return arr;
    }


9、使用Map数据结构去重

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

const unique = (arr) => {
        let res = [];
        let map = new Map();
        for (let i = 0; i < arr.length; i++) {
            if (!map.has(arr[i])) {
                res.push(arr[i]);
                map.set(arr[i], true);
            }
        }
        return res;
    }


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));
    }


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


写在最后

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

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