A super comprehensive summary of 12 methods to remove duplicates from JavaScript arrays

This article brings you a summary of 12 super-comprehensive JavaScript array deduplication methods. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Array deduplication is usually encountered during interviews. It is usually required to hand-write the code of the array deduplication method. If asked, what are the methods for deduplicating arrays? If you can answer 10 of them, the interviewer is likely to be impressed by you.
Array deduplication encountered in real projects is usually processed in the background, and the front-end is rarely used to process array deduplication. Although the probability of using it in daily projects is relatively low, you still need to know it in case you may be asked about it during the interview.

Methods to deduplicate arrays

1. Use ES6 Set to deduplicate (most commonly used in ES6)

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

Does not consider compatibility, this The method of deduplication has the least code. This method cannot remove the "{}" empty object. Later high-order methods will add and remove the "{}" empty object.

2. Use for to nest for, and then splice to remove duplicates (most commonly used in ES5)

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]

Double-layer loop, outer loop element, inner loop Compare values. If the values ​​are the same, this value will be deleted.
If you want to quickly learn more commonly used ES6 syntax, you can read my previous article "Learning ES6 Notes - ES6 Syntax Commonly Used in Work".

3. Use indexOf to remove duplicates

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}

Create an empty result array, for loop the original array, and determine whether the current element exists in the result array. If there are the same values If they are not the same, they will be skipped and pushed into the array.

4. Use sort()

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}

Use the sort() sorting method, and then traverse and compare adjacent elements based on the sorted results.

5. Use the properties of objects that cannot be the same to remove duplicates

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var arrry= [];
     var  obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            arrry.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return arrry;
}

6. Use includes

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var arrry=[];
    for(vari = 0; i < arr.length; i++) {
            if( !arrry.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    arrry.push(arr[i]);
              }
    }
}

7. Use hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

Use hasOwnProperty to determine whether there are object properties

8. Use filter

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}

9 ,Use recursion to deduplicate

function unique(arr) {
        var arrry= arr;
        var len = arrry.length;

    arrry.sort(function(a,b){   //排序后更加方便去重
        return a - b;
    })

    function loop(index){
        if(index >= 1){
            if(arrry[index] === arrry[index-1]){
                arrry.splice(index,1);
            }
            loop(index - 1);    //递归loop，然后数组去重
        }
    }
    loop(len-1);
    return arrry;
}

10.Use Map data structure to deduplicate

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  } 
  return array ;
}

Create an empty Map data structure and traverse the array that needs to be deduplicated. Store each element of the array as a key in the Map. Since the same key value will not appear in the Map, the final result is the result after deduplication.

11. Using reduce

Array.prototype.unique = function() {
  var sortArr = this.sort();
  var array = [];
  sortArr.reduce((s1,s2) => {
    if(s1 !== s2){
      array .push(s1);
    }
    return s2;
  })
  array .push(sortArr[sortArr.length - 1]);
  return array ;
}

12. [...new Set(arr)]

[...new Set(arr)] 
//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

PS: Some articles mentioned the foreach indexOf array deduplication method. Personally, I think they are all similar, so I didn’t write them down.

The above is the detailed content of A super comprehensive summary of 12 methods to remove duplicates from JavaScript arrays. For more information, please follow other related articles on the PHP Chinese website!