JS Advanced Chapter 5 - n Ways to De-duplicate JS Arrays

Keywords: Javascript

1. One of the indexOf() methods

Array.prototype.unique = function(){
    var temp = [];
    for (var i = 0;i < this.length;i++){
        // If item i of the current array has been saved to a temporary array, skip
        if(temp.indexOf( this[i] ) == -1){
            temp.push( this[i] );
        }
    }
    return temp;
}

2. Using indexOf() Method II

Array.prototype.unique = function(){
    var temp = [ this[0] ];
    for (var i = 1;i < this.length;i++){
        // If the first occurrence of the current array element in the array is not i, it is a duplicate element.
        if(this.indexOf( this[i] ) == i){
            temp.push( this[i] );
        }
    }
    return temp;
}

3. Optimized traversal array method

Array.prototype.unique = function(){
    var hash=[];
    // Double-level loop, outer loop represents from 0 to arr.length
    for (var i = 0; i < this.length; i++) {
        // The inner loop represents from i+1 to arr.length
        for (var j = i+1; j < this.length; j++) {
            if(this[i]===this[j]){
                // The next round of judgment that terminates the current cycle and enters the outer cycle when duplicate values are detected
                ++i;
            }
        }
        // Put unreplicated right-sided values into a new array
        hash.push(this[i]);
    }
    return hash;
}

4. Array de-duplication after sorting

Array.prototype.unique = function(){
    this.sort(function( a,b ){ return a-b; });
    var temp = [ this[0] ];
    for (var i = 0;i < this.length;i++){
        if( this[i] != this[i-1]){
            temp.push( this[i] );
        }
    }
    return temp;
}

5. Filtering by array filter method

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

6. Utilizing the Uniqueness of Object Attributes

Array.prototype.unique = function(){
    var temp = [],hash = {};    // Hash as hash table
    for (var i = 0;i < this.length;i++){
        if(!hash[ this[i] ]){    // If there is no current item in the hash table
            hash[ this[i] ] = true;
            temp.push(this[i])
        }
    }
    return temp;
}

7. Using ES6 set data structure

Array.prototype.unique = function(){
    return Array.from(new Set(this));
}

Among the seven methods mentioned above, the running speed of code decreases from top to bottom after testing (the number of elements of array is from 10,000 to 10,000,000). Among them, the speed difference between method 1 and method 2 is not significant, and the speed is the slowest. The specific running speed of method 3 is related to the specific situation of array. The speed of method 4 is faster than that of method 1, 2, 3, but much slower than that of method 5, 6 and 7, and method 5 is the slowest. 6,7 runs fastest and has little difference in speed. However, since set is a new addition to ES6, it is recommended to use methods 5 and 6 with good stability and speed in practical development environment.

Extension: If repeated, remove the element

function unique(arr){
    var hash=[];
    for (var i = 0; i < arr.length; i++) {
        if(arr.indexOf(arr[i])==arr.lastIndexOf(arr[i])){
            hash.push(arr[i]);
        }
    }
    return hash;
}

Posted by maest on Mon, 07 Oct 2019 09:52:42 -0700