Un résumé très complet de 12 méthodes pour supprimer les doublons des tableaux JavaScript

Ce que cet article vous apporte est un résumé de 12 méthodes de déduplication de tableaux JavaScript ultra-complètes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La déduplication de tableau est généralement rencontrée lors des entretiens. Il est généralement nécessaire d'écrire manuellement le code de la méthode de déduplication de tableau. Si on vous le demande, quelles sont les méthodes de déduplication des baies ? Si vous pouvez répondre à 10 d’entre elles, l’intervieweur sera probablement impressionné par vous.
La déduplication de tableau rencontrée dans les projets réels est généralement traitée en arrière-plan, et le front-end est rarement utilisé pour traiter la déduplication de tableau. Bien que la probabilité de l'utiliser dans des projets quotidiens soit relativement faible, vous devez tout de même le connaître au cas où on vous poserait des questions à ce sujet lors de l'entretien.

Méthodes de déduplication des tableaux

1. Utilisez ES6 Set pour dédupliquer (le plus couramment utilisé dans 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", {}, {}]

Ne prend pas en compte la compatibilité. Cette méthode de déduplication contient le moins de code. Cette méthode ne peut pas supprimer l'objet vide "{}". Les méthodes d'ordre supérieur ultérieures ajouteront et supprimeront l'objet vide "{}".

2. Utilisez pour pour imbriquer, puis épisser pour supprimer les doublons (le plus couramment utilisé dans 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", {…}, {…}]

Boucle double couche, élément de boucle externe , boucle interne Comparez les valeurs pendant la boucle. Si les valeurs sont les mêmes, cette valeur sera supprimée.
Si vous souhaitez apprendre rapidement la syntaxe ES6 plus couramment utilisée, vous pouvez lire mon article précédent "Apprendre les notes ES6 - Syntaxe ES6 couramment utilisée au travail".

3. Utilisez indexOf pour supprimer les doublons

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;
}

Créez un nouveau tableau de résultats vide, bouclez le tableau d'origine et déterminez si l'élément actuel existe dans le tableau de résultats. S'il y a la même valeur. Si la valeur est la même, elle sera ignorée. Si elle n'est pas la même, elle sera poussée dans le tableau.

4. Utilisez 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;
}

Utilisez la méthode de tri sort(), puis parcourez et comparez les éléments adjacents en fonction des résultats triés.

5. Utiliser les propriétés des objets qui ne peuvent pas être identiques pour supprimer les doublons

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. Utiliser les inclusions

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. Utilisez 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)
    })
}

Utilisez hasOwnProperty pour déterminer s'il existe des propriétés d'objet

Utilisez un filtre

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

9. Utilisez la récursivité pour supprimer les doublons

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. Utilisez la structure de données Map pour supprimer les doublons

<🎜. >

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 ;
}

Créez une structure de données de carte vide, parcourez le tableau qui doit être dédupliqué et stockez chaque élément du tableau en tant que clé dans la carte. Étant donné que la même valeur de clé n'apparaîtra pas dans la carte, le résultat final est le résultat après déduplication.

11. Utilisation de réduire

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 : Certains articles mentionnent la méthode de déduplication de tableau foreach+indexOf. Personnellement, je pense qu'ils sont tous similaires, donc je ne les ai pas écrits.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!