4. JavaScript array deduplication

double loop

　　Array deduplication is to compare the elements of the array and remove the repeated occurrences. Isn't the most primitive way to compare double loops?

// Test data 
var test = [1,2,2,10,'1','a','a','b','@','@' ];
 
console.log(unique1(test));  //[1,2,10,'1','a','b','@']
 
function unique1(target) {    // Double-layer loop compares array elements for deduplication 
  var res = [];       // Store data 
  for ( var i = 0 ; i<target.length ; i++ ){
 
    for ( var j = 0,resLen = res.length ; j < resLen ; j++ ){
       if (target[i] === res[j]){   // If there is the same data, break 
        break ;
      }
    }
 
    if (j === resLen){    // There is no same data in res, save 
      res.push(target[i])
    }
  }
  return res;
}

indexof optimizes the inner loop

　　Use indexof to optimize the inner loop in this chestnut. indexOf()The method returns the first index in the array at which a given element can be found, or -1 if it does not exist

var test = [1,2,2,10,'1','a','a','b','@','@'];
 
console.log(unique2(test));  //[1,2,10,'1','a','b','@']
 
function unique2(target) {    // indexof simplifies the inner loop 
  var res = [];       // store data 
  for ( var i = 0 ; i<target.length ; i++ ){
     if (res.indexOf(target[i]) < 0)   // If the element does not exist in res, return -1 
    res.push(target[i])
  }
  return res;
}

Object key-value pair optimization inner loop

　　The key of the object is different and repeated, this feature can be used to determine the repeated elements

　　// Test data 
    var test = [1,2,2,10,'1','a','a','b','@','@' ];

    console.log(unique3(test));   // [1,2,10,'a','b','@'] This method will consider 1 and '1' to be the same because the object key is a string of

    function unique3(target) {  //对象键值的方式
      var obj = {};
      var res = target.filter(function(value,index){
        return obj.hasOwnProperty(typeof value + value ) ? false : (obj[typeof value + value] = true);

 }) return res; }

filter optimizes the outer loop

　　Use filter in this pump to optimize the outer loop. filter() method creates a new array containing all the elements of the test implemented by the provided function.

var test = [1,2,2,10,'1','a','a','b','@','@'];
 
console.log(unique5(test));  //[1,2,10,'1','a','b','@']
 
function unique5(target) {    // filter simplifies the outer loop 
  var res = target.filter( function (value,index,array){
     return target.indexOf(value) === index     // returns true for the first occurrence 
  } )
   return res
}

Set to deduplicate

　　ES6 provides a new data structure Set. It is similar to an array, but the values ​​of the members are all unique and there are no duplicate values. This feature is very convenient for array deduplication.

　　// Test data 
    var test = [1,2,2,10,'1','a','a','b','@','@' ];

    var unique6 = (target) => [... new Set(target)];   // simply 

    console.log(unique6(test));   // [1,2,10,'1','a', 'b','@']