Javascript array deduplication method final summary

  • 2020-03-30 03:10:09
  • OfStack

Sometimes you run into the requirement to remove duplicate elements from an array and keep only one. The first thing that comes to mind is probably to use two for loops to compare and remove duplicate elements, as shown below:

Method 1:


Array.prototype.distinct = function(){
 var arr = [],
      len = this.length;
 for ( var i = 0; i < len; i++ ){
  for( var j = i+1; j < len; j++ ){
   if( this[i] === this[j] ){
    j = ++i;
   }
  }
  arr.push( this[i] );
 }
 return arr;
};

Using method 1 will perform much worse if you encounter large amounts of data. So go ahead and look at the method below.

Method 2:


Array.prototype.distinct = function(){

 var self = this,
  arr = self.concat().sort(); //Create a new array and sort it

 arr.sort(function( a, b ){
  if( a === b ){
   var n = self.indexOf( a ); //Get index value
   self.splice( n, 1 );
  }
 });

 return self;

};

See method 3 from fool's wharf, here is his code:


Array.prototype.delRepeat=function(){
 var newArray=[];
 var provisionalTable = {};
 for (var i = 0, item; (item= this[i]) != null; i++) {
        if (!provisionalTable[item]) {
            newArray.push(item);
            provisionalTable[item] = true;
        }
    }
    return newArray;
};

Method 3 USES a temporary object to store the elements of an array, which is ignored if you run into duplicate array elements. However, if the following array is encountered:


var arr = [ 'firefox', 1, '1' ];

The above array will be deleted as duplicate elements if method 3 is used, so method 3 has been modified a little bit to solve this BUG.
Modified version of method 3:


Array.prototype.distinct = function(){
 var arr = [],
  obj = {},
  i = 0,
  len = this.length,
  result;
 for( ; i < len; i++ ){
  result = this[i];
  if( obj[result] !== result ){
   arr.push( result );
   obj[result] = result;
  }
 }
 return arr;
};

After that, I read the comments at the end of the fool's wharf article. This method is the same as the method provided by Rekey. However, this method is also buggy.


var arr = [ 'firefox', 1, '1', 1 ];

The above array, using a modified version of method 3, will not delete the last three elements, but this array is a bit extreme, if you encounter the literal string and the same number of data should be pre-processed to avoid this BUG. The method of using temporary objects is slightly faster than sort in standard browsers, and the sort method should vary from browser to browser.


Related articles: