(深度好文)面試官問你知道數組去重九種方法的優缺點嗎

var arr = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];複製代碼

雙重for循環去重

優勢: 

          兼容性好 

          '1'和1能夠區分

缺點:

          對象不能夠去重 由於對象不能夠用來比較   

          NaN不能夠去重

Array.prototype.unique = function () { 
    var newArr = [], 
        isRepeat,                
        len = this.length;            
    for (var i = 0; i < len; i++) {                
        isRepeat = false;                
        for (var j = 0; j < newArr.length; j++) {                    
            if (this[i] === newArr[j]) {                        
                isRepeat = true;                        
                break;                    
            }                
        }                
        if (!isRepeat) {                    
            newArr.push(this[i]);                
        }            
    }            
    return newArr;        
}複製代碼

indexOf去重

優勢: 

          '1'和1能夠區分

缺點: 

           對象不能夠去重 由於對象不能夠用來比較

           NaN不能夠去重

Array.prototype.unique = function() {            
    var res = [],                
    len = this.length;            
    for (var i = 0; i < len; i++) {     
        var current = this[i];                
        if (res.indexOf(current) === -1) {                    
            res.push(current);                
        }            
    }            
    return res;        
}複製代碼

相鄰元素去重

優勢:

          '1'和1能夠區分

缺點:

           對象不能夠去重 由於對象不能夠用來比較

           NaN不能夠去重

           不能識別undefined

Array.prototype.unique = function () {            
    var newArr = [],                
    len = this.length;            
    this.sort(function(a, b) { // 改變原數組       
         return a-b;         
    });            
    for (var i = 0; i < len; i++) {                
        if (this[i] !== this[i + 1]) {           
             newArr.push(this[i]);    
        }            
    }            
    return newArr;        
}複製代碼

filter

優勢:

          '1'和1能夠區分  

 缺點:        

           對象不能夠去重 由於對象不能夠用來比較                

           NaN識別不了

Array.prototype.unique = function() {            
    var res = this.filter(function(item, index, array){                
        return array.indexOf(item) === index;            
    })            
    return res;        
}複製代碼

includes

優勢: 

          '1'和1能夠區分 

          NaN能夠去重

缺點:    

          對象不能夠去重 由於對象不能夠用來比較        

Array.prototype.unique = function () {            
    var newArr = [];            
    this.forEach(item => {                
        if (!newArr.includes(item)) {                    
            newArr.push(item);                
        }            
    });            
    return newArr;        
}複製代碼

reduce

優勢:

          能夠區分'1'和1

缺點:

          對象不能夠區分 

          NaN不能夠區分

Array.prototype.unique = function () {            
    return this.sort().reduce((init, current) => {                
        if (init.length === 0 || init[init.length - 1] !== current) {                    
            init.push(current);                
        }                
        return init;            
    }, []);        
}複製代碼

對象鍵值對

基本思路：利用了對象的key不能夠重複的特性來進行去重。

優勢: 

          NaN能夠去重 

          正則能夠去重

 缺點:

           '1'和1不能區分 

            對象不能夠去重 由於對象做爲 key 會變成 [object Object]

Array.prototype.unique = function () {            
    var obj = {},                
    arr = [],                
    len = this.length;            
    for (var i = 0; i < len; i++) {                
        if (!obj[this[i]]) {                    
            obj[this[i]] = 'abc'; // 不能是 = this[i] 萬一數組去重0                    
            arr.push(this[i]);                
        }            
    }            
    return arr;        
}

// 改變版本1   
Array.prototype.unique = function () {            
    const newArray = [];            
    const tmp = {};            
    for (let i = 0; i < this.length; i++) {                
        if (!tmp[typeof this[i] + this[i]]) {                    
            tmp[typeof this[i] + this[i]] = 1;                    
            newArray.push(this[i]);                
        }            
    }            
    return newArray;        
}

// 改進版本2  
Array.prototype.unique = function () {            
    const newArray = [];            
    const tmp = {};            
    for (let i = 0; i < this.length; i++) {                
        // 使用JSON.stringify()進行序列化                
        if (!tmp[typeof this[i] + JSON.stringify(this[i])]) {                    
            // 將對象序列化以後做爲key來使用                    
            tmp[typeof this[i] + JSON.stringify(this[i])] = 1;                    
            newArray.push(this[i]);                
        }            
    }            
    return newArray;        
}
複製代碼

Map

原理: key對應value，key和value惟一 ，任何值均可以當屬性

優勢:

        NaN能夠去重

缺點:

        對象不能夠去重

Array.prototype.unique = function () {            
    var newArr = [],            
        tmp = new Map(),
        len = this.length;            
    for (var i = 0; i < len; i++) {                
        if (!tmp.get(this[i])) {                    
            tmp.set(this[i], 1);                    
            newArr.push(this[i]);                
        }            
    }            
    return newArr;        
}

//簡化版
Array.prototype.unique = function() {            
    var map = new Map()            
    return arr.filter((a) => !map.has(a) && map.set(a, 1))        
}複製代碼

Set

 原理: 它相似於數組，可是成員的值都是惟一的，沒有重複的值

優勢: 

          NaN去重

缺點： 

         對象不能夠去重

Array.prototype.unique = function () {            
    return [...new Set(this)];        
}複製代碼

你的點贊是我持續輸出的動力 但願能幫助到你們 互相學習 有任何問題下面留言 必定回覆