En savoir plus sur cinq façons de dédupliquer des tableaux JavaScript

Cet article vous apporte des connaissances pertinentes sur JavaScript, qui présente principalement les problèmes liés à la déduplication de tableau, notamment la déduplication d'ensemble es6, la déduplication double for en boucle, l'index de déduplication, etc. Jetons-y un coup d'œil ensemble, j'espère que cela vous sera utile à tout le monde.

[Recommandations associées : Tutoriel vidéo JavaScript, front-end Web]

La méthode la plus simple, la déduplication ES6 Set (la plus recommandée)

Cette méthode est ma méthode préférée dans le développement quotidien, car sa méthode d'utilisation est la plus simple de toutes les suppressions de doublons. Et je suis un patient cancéreux paresseux.

new Set est un nouveau type introduit dans ES6. La différence entre celui-ci et un tableau est que les données du type Set ne peuvent pas avoir de valeurs répétées. Bien entendu, certaines méthodes Set des tableaux ne peuvent pas être appelées.

Comment l'utiliser : C'est en fait très simple. Convertissez un tableau en données Set, puis reconvertissez-le pour terminer la déduplication.

    const arr = [1,1,2,2,3,3,4,4,5,5];
    const setData = Array.from(new Set(arr));
    console.log(setData);

Illustration

Mais la déduplication Set présente un inconvénient : elle ne peut pas dédupliquer les données de type référence. Par exemple, un tableau d'objets.

Légende :

Donc, si votre tableau contient des données de type valeur (telles que toutes les chaînes ou tous les nombres), alors utiliser Set pour la déduplication doit être le premier choix, et cela vous évitera bien des ennuis.

La méthode la plus ancienne, double boucle for pour supprimer les doublons

Il y a longtemps, quand il n'y avait pas de Set, de carte ou de filtre, la double boucle for était presque le seul moyen de supprimer les doublons.

//双重循环去重
const handleRemoveRepeat = (arr) => {
    for (let i=0,len = arr.length; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--;
                len--;
            }
        }
    }
    return arr;
};

Légende :

Il y a un point intéressant ici. Peut-être que vous ne comprenez pas très bien pourquoi deux choses sont déclarées dans l'expression initiale de ma boucle for : let i = 0;len = arr.length;

Laissez-moi vous donner la réponse :

Les trois cercles représentent les trois expressions de la boucle for, qui sont : l'expression initiale, l'expression de jugement et l'expression d'auto-incrémentation. Parmi eux, l'expression initiale sera exécutée une fois au début de la boucle for, et ne sera plus exécutée à l'avenir, mais l'expression de jugement et l'expression d'auto-incrémentation seront exécutées à chaque fois que la boucle est exécutée.

Si vous ne comprenez pas bien les mots, ce n’est pas grave, j’ai fait un dessin.

Vous avez peut-être découvert que le contenu de ce dernier cercle tombera dans une boucle.

Mais qu'est-ce que cela a à voir avec notre len = arr.length initial ?

Il est à noter que si elle est définie au début, alors chaque boucle doit utiliser arr.length length est une méthode Bien que sa consommation ne soit pas importante, dans la boucle for, cette consommation sera consommée par la méthode. Supposons que si la boucle doit être bouclée 10 000 fois, length sera exécutée 10 000 fois.

Le moyen le plus inutile de supprimer des poids, indexOf Weight Removal

indexOf est encore relativement simple et inutile. Pourquoi dit-on qu'elle est inutile ? C'est difficile à dire, la méthode indexOf est en effet plus simple que la double boucle for ci-dessus. Disons que c’est simple, hé, il n’a pas de méthode Set pour faciliter la reprise. Donc inutile.

//去重
const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++) 
     if (repeatArr.indexOf(arr[i]) === -1)  repeatArr.push(arr[i])
    return repeatArr;
}

Légende :

De même, cette méthode a également un détail. Vous avez peut-être découvert que if et for ci-dessus n'ont pas d'accolades yes ; Il n'est pas nécessaire d'ajouter un {} supplémentaire, sauf si cela est nécessaire.

Vous pensez peut-être que c'est illisible, mais c'est la partie intéressante. Il s'agit d'une méthode outil, une méthode destinée à être cachée dans les utilitaires. Elle n'a rien à voir avec la logique métier et n'a pas besoin d'être très lisible.

De plus, il y a une autre raison pour l'écrire de cette façon : cela aura un plus grand impact visuel sur les gens. Pour le dire en termes humains -----très prétentieux ;

Une méthode de déduplication similaire à indexOf, inclut la déduplication

La méthode de déduplication utilisant include ne peut pas être considérée comme très similaire à indexOf, elle est fondamentalement la même. Ce qui a changé, c'est seulement la méthode de jugement.

La méthode de jugement des inclusions est plus simple. Parcourez chaque élément du tableau et utilisez le nouveau tableau pour détecter si le tableau actuel contient un élément du tableau. Si ce n'est pas le cas, ajoutez la méthode element

const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++)
        if (!repeatArr.includes(arr[i])) repeatArr.push(arr[i])
    return repeatArr;
}

Legend

includes est toujours très utile dans d'autres scénarios. que la déduplication.

最有趣的去重方法，使用filter去重。

使用filter配合indexOf进行的去重过程，真的可以非常的简单且富含趣味性。

//去重
const handleRemoveRepeat = (arr) => arr.filter((item,index) => arr.indexOf(item,0) === index);

是的，没了，就一行。

图例

您是否没有反应过来？乍一看，不知道他是怎么完成去重的。

小问题，我为您解答疑惑。

indexOf的特性是返回被查找的目标中包含的第一个位置的索引

如图，下标为0和下标为4的位置存储的都是“1”。但是indexOf()只返回了0。因为indexOf的特性是返回被查找的目标中包含的第一个位置的索引。

同样的，我们可以利用这个特性。来完成去重，文字描述恐怕很难表达准确，您可以看看下面的这张图。

如果要去重对象数组怎么办？

去除对象数组的方式他并不是很稳定，这不像我们去重值类型数据的数组，上面的五种方法随便复制一种，往里面一调用就好了。绝对不会出问题。

但是对象数组去重，需要有一个去重条件，也就是根据哪个字段进行去重。

用双重循环去重举个例子：

图例

如上图，我们就是拿数据的id作为去重条件的。

像这样的对象数组就不能直接提供方法，因为每一个场景下的对象数组都不一定一样。我这是根据id去重，万一其他地方需要根据其他字段去重呢。

所以，如果您需要去重对象，根据上方的截图中的代码。使用双重for循环的方法，自己自定义一个可以满足您当前业务需求的去重方法。

【相关推荐：JavaScript视频教程、web前端】

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!