Suppression des éléments en double avec JavaScript

Comme ES6 devient de plus en plus populaire dans le développement Web, nous allons probablement voir – et écrire – moins de code en utilisant d’autres bibliothèques. En ce qui concerne WordPress, jQuery est encore très courant.

Personnellement, je ne pense pas qu’il y ait quoi que ce soit de mal à utiliser jQuery (bien que vous n’en ayez peut-être pas besoin ), mais je pense également qu’il est important de garder vos compétences pointues et à jour avec les nouvelles technologies.

Mais apprendre à écrire du code ES6 n’est pas le but de cet article, ni comment réaliser quelque chose en utilisant ES6.

Au lieu de cela, il s’agit toujours de WordPress et de jQuery. Je reviendrai sur ES6 à la fin du post. L’une des choses que j’aimerais couvrir, cependant, est de savoir comment supprimer les éléments en double d’une liste avec une propriété commune.

Suppression des éléments en double (via jQuery)

Plus précisément, supposons que vous ayez une liste d’éléments – peut-être une liste ordonnée, une liste ordonnée ou même simplement un conteneur avec un ensemble d’enfants – et chaque enfant a un ensemble de propriétés.

Ces propriétés peuvent être des attributs de classe, des propriétés de données personnalisées ou quelque chose comme ça. Par exemple, supposons que nous ayons une liste non ordonnée et que chaque élément enfant ait une propriété data-id.

De plus, disons que la liste des éléments est construite à partir de la réponse d’une API donnée où des doublons existent dans les données. Bien sûr, le côté serveur devrait gérer cela, mais dans les cas où ce n’est pas fait, cela peut toujours être fait côté client.

Voici le code pour le faire avec le commentaire ci-dessous:

/**
 * Removes duplicates from the specified array of items; however, this function
 * assumes that $items is an unordered list of items with child elements.
 *
 * @param  $items An unordered list of products with duplicaten children.
 * @return $items An unordered list of products no duplicate children.
 *
 * @private
 */
var _removeDuplicates = function($items) {

  var unique = {},
      dataItemId = -1;

  $items
    .children()
    .each(function() {
      dataItemId = $(this).attr('data-id');
      if (unique[dataItemId]) {
        $(this).remove();
      } else {
        unique[dataItemId] = true;
      }
    });

  return $item;
};

Notez ce qui suit :

• la fonction accepte une liste jQuery d’éléments avec des enfants,
• les enfants d’un élément data-id qui est utilisé pour déterminer s’il existe des éléments en double,
• nous configurons un tableau pour déterminer si nous avons déjà vu l’élément,
• sinon, nous l’ajoutons à la liste ; sinon, on l’enlève,
• enfin, nous retournons la liste modifiée, plus mise à jour.

Et c’est presque ligne par ligne ce que fait le code.

Personnellement, j’essaie de ne pas utiliser d’instructions if/else dans le contexte d’une boucle (ou même en dehors d’une boucle), mais il y a des moments où ce n’est pas une mauvaise pratique de le faire, et c’en est une.

Alors, qu’en était-il de l’ES6 ?

Plus tôt, j’ai mentionné que ES6 est en hausse et c’est quelque chose que nous, en tant que développeurs, devrions apprendre. Comme je continue à le faire, je vais peut-être revoir ce post et partager comment obtenir la même fonctionnalité en utilisant ES6 plutôt que jQuery pour montrer comment cela peut être fait.

Quoi qu’il en soit, si vous utilisez WordPress et que vous utilisez jQuery depuis des années, je vous exhorte à sortir de la bibliothèque et à apprendre certaines des nouvelles fonctionnalités du langage.

Personnellement, j’apprends en faisant, et même si j’avais une propension initiale à utiliser par défaut jQuery, j’ai opté pour ES6 dans un projet sur lequel nous travaillons actuellement à la demande d’un coéquipier.