Résumé des méthodes de déduplication de tableaux JavaScript (avec code)

Ce que cet article vous apporte est un résumé des méthodes de déduplication de tableaux JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La déduplication de tableaux est encore fréquemment utilisée dans le développement quotidien, et c'est aussi un sujet qui peut être facilement abordé sur Internet. Par conséquent, le but de la rédaction de cet article est de résumer et de résumer puisque de nombreuses personnes le font. Que savez-vous de la déduplication de baie mentionnée ? Ou si vous rencontrez le besoin de supprimer les doublons pendant le développement, pouvez-vous penser à une meilleure solution ?

Cette fois, nous verrons comment effectuer la déduplication des tableaux la plus appropriée. Nous devons prendre en compte non seulement la compatibilité, mais également les performances et l'élégance du code.

Mon parcours d'apprentissage consiste à imiter la méthode d'apprentissage de Yan Yu (github : mqyqingfeng). Je suis reconnaissant envers des personnes exceptionnelles comme Yan Yu d'avoir pris les devants. Je ne veux pas simplement le faire, alors je le fais. Je m'entraînerai davantage et je produirai davantage. J'espère qu'à l'avenir, je pourrai tracer mon propre chemin.

1. Mise en route

function unique(origin) {
    var result = [];
    for(var i = 0; i < origin.length; i++) {
        var arrayItem = origin[i];

        for(var j= 0; j< result.length; j++) {
            var resultItem = result[j];
            
            // 如果在结果数组循环中找到了该元素，则跳出循环，进入下一个源数组元素的判断
            if(resultItem === arrayItem) {
                break;
            }
        }
        
        // 如果把结果数组循环完都没有找到该元素，就将该元素压入结果数组中
        if(j === result.length) {
            result.push(arrayItem);
        }
    }
    return result;
}

var array = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;1&#39;, 0, &#39;c&#39;, 1, &#39;&#39;, 1, 0];
console.log(unique(array));  // ["a", "b", "c", "1", 0, 1, ""]

Le code ci-dessus est le moyen le plus simple de réaliser la déduplication de tableau. L'avantage est qu'il a une excellente compatibilité. L'inconvénient est qu'il nécessite deux boucles for et. la complexité temporelle est O (n^2), mauvaises performances.

2. L'attribut indexOf du tableau

L'attribut indexOf dans le tableau est une spécification ES5. Seuls IE8 et les versions antérieures ne prennent pas en charge cette méthode. Relativement parlant, si vous n'avez pas besoin d'être compatible avec IE8, essayez d'utiliser indexOf pour déterminer si un élément est dans le tableau.

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

3. L'attribut filter du tableau

La méthode filter() du tableau crée un nouveau tableau. Les éléments du nouveau tableau sont vérifiés pour tous les éléments du spécifié. tableau qui remplit les conditions. Le rappel de

filter a trois paramètres, le troisième paramètre est l'objet tableau auquel appartient l'élément actuel, nous pouvons donc continuer à utiliser l'attribut indexOf.

function unique(origin) {
    var result = origin.filter(function (item, index, array){
        // 获取元素在源数组的位置，只返回那些索引等于当前元素索引的值。
        return array.indexOf(item) === index;
    });
    return result;
}

filter est compatible avec IE9. Cette méthode n'a pas de boucle for et utilise principalement les attributs filter et indexOf, le code est donc relativement élégant.

4. Utilisation de la valeur clé de l'objet

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        // 如果键对应的值，为真，意味着对象的键中已经有重复的键了。
        if(!hashTable[origin[i]]) {
        // 将元素作为对象的键，默认键对应的值为 true, 
            hashTable[origin[i]] = true;
            
            // 如果对象中没有这个键，则将这个元素放入结果数组中去。
            result.push(origin[i]);
        }
    }
    return result;
}

La complexité événementielle de cette solution est O(n), mais la clé de l'objet est de type chaîne par défaut. cela signifie-t-il ? Eh bien, le nombre 1 et la chaîne « 1 » sont égaux dans la clé, donc la méthode ci-dessus ne convient pas à la déduplication de chaînes et de nombres mixtes.

On met donc également le type de l'élément dans la clé de l'objet :

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        var current = origin[i];
        // 字符串拼接元素的类型和元素
        var key = typeof(current) + current;
        if(!hashTable[key]) {
            hashTable[key] = true;
            result.push(current);
        }
    }
    return result;
}

5 Méthode de tri du tableau

function unique(origin) {
    return origin.concat.sort().filter(function(item, index, array) {
        // !index 表示第 0 个元素应该被返回。
        return !index || item !== origin[index-1]
    })
}

function unique(array) {
    array.sort(); // 排序字符串
    array.sort(function(a, b) {
        return a-b; // 排序数字
    })
    
    for(let i=0; i<array.length; i++) {
        if(array[i] === array[i+1]) {
            array.splice(i, 1);
            i--; // 应该将前一个数删除，而不是删除后一个数。是因为元素被删除之后，后面元素的索引会迁移，所以要 i--;
        }
    }
    return array;
}

L'avantage du. La méthode de tri consiste à utiliser Si trié, renvoie l'élément suivant qui n'est pas égal au précédent. Relativement simple et intuitif. L'inconvénient est que cela modifie la position de tri d'origine des éléments.

6. ES6 Set

ES6 fournit une nouvelle structure de données Set, qui est similaire à un tableau, mais les valeurs des membres sont uniques et il n'y a pas de valeurs en double. Lors de l'ajout d'une valeur à l'ensemble, aucune conversion de type ne se produit, donc 5 et « 5 » sont deux valeurs différentes. Set détermine en interne si deux valeurs sont identiques, en utilisant un algorithme similaire à "===", mais la différence est que NaN est considéré comme égal à NaN en interne

Set peut être converti en tableau, il est donc facile de mettre en œuvre la déduplication

function unique(origin) {
    return Array.from(new Set(origin));
}

7. ES6 Map

ES6 ajoute de nouveaux résultats de données cartographiques, et la solution de valeur de clé d'objet précédente peut être facilement optimisée grâce aux méthodes has et set. .

function unique(origin){
    const map = new Map()
    return origin.filter((item) => !map.has(item) && map.set(item, true))
}

8. Jugement de type

Certains types de données courants sont === et indexOf qui ne peuvent pas être détectés, par exemple :

console.log({} === {})  // false;

console.log(NaN === NaN)  // false;

console.log(/a/ === /a/);  // false;

console.log(1 === new String('1'))  // false;

var arr = [NaN];
console.log(arr.indexOf(NaN)); // -1

Par conséquent, lors du jugement, s'il y a NaN et des objets dans les données, évitez d'utiliser indexOf et ===

a déjà été mentionné dans Set, afin que la méthode Set puisse supprimer NaN.

Résumé

Je suis fatigué de lire sur la déduplication des données sur Internet, mais je souhaite quand même écrire un article pour m'entraîner et le résumer. Ce serait formidable d'avoir plus d'idées dans mon travail. . Merci à ceux qui aiment partager et apprécier les résultats.

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!