Maison > interface Web > js tutoriel > le corps du texte

Comment supprimer les doublons du tableau js ?

青灯夜游
Libérer: 2020-10-23 09:16:10
original
38341 Les gens l'ont consulté

Méthode de déduplication de tableau JS : 1. Utilisez l'objet Set d'ES6 pour dédupliquer ; 2. Utilisez for pour imbriquer, puis splice pour dédupliquer ; 3. Utilisez indexOf pour dédupliquer ; les objets ne doivent pas être les mêmes Caractéristiques de la déduplication ; 5. Utilisez la structure de données Map pour dédupliquer ; 6. Utilisez réduire + inclut pour dédupliquer ;

Comment supprimer les doublons du tableau js ?

Méthode pour supprimer la duplication du tableau

1.

ES6 fournit un nouvel ensemble de structures de données. C'est similaire à un tableau, mais les valeurs des membres sont uniques et il n'y a pas de valeurs en double. Set lui-même est un constructeur utilisé pour générer la structure de données Set.

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", {}, {}]
Copier après la connexion

Quelle que soit la compatibilité, cette méthode de déduplication contient le moins de code. Cette méthode ne peut pas supprimer les objets vides "{}", et les méthodes d'ordre supérieur ultérieures ajouteront des méthodes pour supprimer les "{}" répétés.

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", {…}, {…}]
         //NaN和{}没有去重,两个null直接消失了
Copier après la connexion

Boucle double couche, élément de boucle externe, élément de boucle interne boucle Comparez les valeurs. Si les valeurs sont les mêmes, cette valeur sera supprimée.

3. Utilisez indexOf pour supprimer les doublons

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", {…}, {…}]
         //NaN和{}没有去重,两个null直接消失了
Copier après la connexion

Créez un nouveau tableau de résultats vide, faites une boucle sur le tableau d'origine et déterminez si l'élément actuel existe dans le tableau de résultats. Si c'est le cas, si les valeurs sont les mêmes, elles sont ignorées ; si elles ne sont pas les mêmes, elles sont poussées dans le tableau.

4. Utilisez sort()

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log(&#39;type error!&#39;)
        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;
}
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))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]
      //NaN、{}没有去重
Copier après la connexion

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

5. Utilisez les propriétés des objets qui ne peuvent pas être les mêmes pour la déduplication (cette méthode de déduplication des tableaux pose des problèmes, n'est pas recommandée et doit être améliorée)

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log(&#39;type error!&#39;)
        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;
}
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, null, NaN, 0, "a", {…}]
    //两个true直接去掉了,NaN和{}去重
Copier après la connexion

6. Utilisez include

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log(&#39;type error!&#39;)
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
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", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
         //{}没有去重
Copier après la connexion

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)
 })
}
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", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]
   //所有的都去重了
Copier après la connexion

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

8. Utilisez le filtre

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
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", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]
Copier après la connexion

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

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

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

    function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1);    //递归loop,然后数组去重
        }
    }
    loop(len-1);
    return array;
}
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, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
Copier après la connexion

10. Utilisez la structure de données de la carte 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 ;
}
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, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
Copier après la connexion

Créez une structure de données Map 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. Utiliser réduire+includes

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
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", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
Copier après la connexion

12 [...new Set(arr)]

[...new Set(arr)] 
//代码就是这么少----(其实,严格来说并不算是一种,相对于第一种方法来说只是简化了代码)
Copier après la connexion

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 notés.

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo js

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!