Detailed explanation of four methods to remove duplicates from JavaScript arrays

Array deduplication, the general requirement is to give you an array, call the deduplication method, and return a copy of the value. There will be no duplicate elements in the copy. Below, the editor of Script House has brought you a variety of methods for deduplicating js arrays. They are very good. Friends who need them can refer to

Array Deduplication. The general requirement is to give you an array and call the deduplication method. , returns a copy of the value, with no duplicate elements in the copy. Generally speaking, two elements that return true through === comparison are considered to be the same element and need to be deduplicated. Therefore, 1 and "1" are different elements, and 1 and new Number(1) are different elements, {} and {} are different elements (different references). (Of course, if the requirement considers {} and {} to be counted as the same elements, then the solution will be different)

method 1

Use double loop

function unique(arr) {
 var res = [];
 for(var i = 0, len = arr.length;i < len; i++) {
  var item = arr[i];
  for(var j = 0, jLen = res.length; j<jLen; j++) {
   if(item == res[j]) break;
  }
  if(j == jLen) res.push(item);
 }
 return res;
}

method 2

function unique(arr) {
 var ret = []
 for (var i = 0; i < arr.length; i++) {
 var item = arr[i]
 if (ret.indexOf(item) === -1) {
  ret.push(item)
 }
 }
 return ret
}

You can use a syntax sugar for judgment here

function unique(arr) {
 var res = [];
 for(var i = 0, len = arr.length;i < len; i++) {
  var item = arr[i];
  (res.indexOf(item) === -1) && res.push(item);
 }
 return res;
}

But in lower version browsers there is no indexOf

var indexOf = [].indexOf ?
 function(arr, item) {
  return arr.indexOf(item)
 } :
 function indexOf(arr, item) {
  for (var i = 0; i < arr.length; i++) {
  if (arr[i] === item) {
   return i
  }
  }
  return -1
 }
function unique(arr) {
 var ret = []
 for (var i = 0; i < arr.length; i++) {
 var item = arr[i]
 if (indexOf(ret, item) === -1) {
  ret.push(item)
 }
 }
 return ret
}

#method3

Another comparison method using double loops. The previous one is to compare the elements of the original array and the result array one by one. Next we can Put the last element of the repeated elements of the original array into the array

function unique(arr) {
 var ret = [];
 var len = arr.length;
 var isRepeat;
 for(var i=0; i<len; i++) {
  isRepeat = false;
  for(var j=i+1; j<len; j++) {
   if(arr[i] === arr[j]){
    isRepeat = true;
    break;
   }
  }
  if(!isRepeat){
   ret.push(arr[i]);
  }
 }
 return ret;
}

There is also an optimized version

function unique(a) {
 var res = [];
 for (var i = 0, len = a.length; i < len; i++) {
 for (var j = i + 1; j < len; j++) {
  // 这一步十分巧妙
  // 如果发现相同元素
  // 则 i 自增进入下一个循环比较
  if (a[i] === a[j])
  j = ++i; //j = i = i + 1;
 }
 res.push(a[i]);
 }
 return res;
}

method4

Use the object object in javascript as a hash table

function dedup(arr) {
 var hashTable = {};
 return arr.filter(function(value,index,arr){
  var key = JSON.stringify(value);
  var match = Boolean(hashTable[key]);
  return (match ? false : hashTable[key] = true);
 });
}

Because the key values ​​​​of Object are all String types, 1 and "1" cannot be distinguished. We can make a slight improvement and store the type in the key.

function dedup(arr) {
 var ret = [];
 var hash = {};
 for(var i = 0; i < arr.length; i++) {
  var item = arr[i];
  var key = typeof(item) + item;
  if(hash[key] !== 1) {
   ret.push(item)
   hash[key] = 1;
  }
 }
 return ret;
}

Summarize

The above is the detailed content of Detailed explanation of four methods to remove duplicates from JavaScript arrays. For more information, please follow other related articles on the PHP Chinese website!