Entfernen doppelter Elemente mit JavaScript

Da ES6 in der Webentwicklung immer beliebter wird, werden wir wahrscheinlich weniger Code sehen – und schreiben –, der andere Bibliotheken verwendet. Wenn es um WordPress geht, ist jQuery immer noch sehr verbreitet.

Ich persönlich denke nicht, dass die Verwendung von jQuery von Natur aus falsch ist (obwohl Sie es möglicherweise nicht benötigen ), aber ich denke auch, dass es wichtig ist, Ihre Fähigkeiten auf dem neuesten Stand und mit neueren Technologien zu halten.

Aber das Schreiben von ES6-Code zu lernen, ist nicht der Zweck dieses Beitrags, und auch nicht, wie man etwas mit ES6 erreicht.

Stattdessen geht es immer noch um WordPress und jQuery. Ich werde am Ende des Beitrags auf ES6 zurückkommen. Eines der Dinge, die ich jedoch gerne behandeln würde, ist das Entfernen doppelter Elemente aus einer Liste mit einer gemeinsamen Eigenschaft.

Entfernen doppelter Elemente (über jQuery)

Nehmen wir genauer gesagt an, Sie haben eine Liste von Elementen – vielleicht ist es eine geordnete Liste, eine geordnete Liste oder sogar nur ein Container mit einer Reihe von untergeordneten Elementen – und jedes untergeordnete Element hat eine Reihe von Eigenschaften.

Diese Eigenschaften können Klassenattribute, benutzerdefinierte Dateneigenschaften oder ähnliches sein. Nehmen wir zum Beispiel an, wir haben eine ungeordnete Liste und jedes untergeordnete Element hat eine Daten-ID- Eigenschaft.

Nehmen wir weiter an, dass die Liste der Elemente aus der Antwort einer bestimmten API erstellt wird, wenn Duplikate in den Daten vorhanden sind. Sicher, die Serverseite sollte dies handhaben, aber in den Fällen, in denen dies nicht geschehen ist, kann dies immer noch auf der Clientseite erfolgen.

Hier ist der Code dafür mit dem Kommentar darunter:

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

Beachte das Folgende:

• Die Funktion akzeptiert eine von jQuery umschlossene Liste von Elementen mit untergeordneten Elementen.
• die untergeordneten Elemente eines Daten-ID- Elements, das verwendet wird, um festzustellen, ob doppelte Elemente vorhanden sind,
• Wir richten ein Array ein, um festzustellen, ob wir den Artikel schon einmal gesehen haben,
• wenn nicht, fügen wir es der Liste hinzu; andernfalls entfernen wir es,
• schließlich geben wir die modifizierte, aktuellere Liste zurück.

Und das ist fast Zeile für Zeile, was der Code tut.

Persönlich versuche ich, if/else -Anweisungen nicht im Kontext einer Schleife (oder sogar außerhalb einer Schleife) zu verwenden, aber es gibt Zeiten, in denen es keine schlechte Praxis ist, dies zu tun, und dies ist eine davon.

Also, was war das mit ES6?

Ich habe bereits erwähnt, dass ES6 auf dem Vormarsch ist und wir als Entwickler das lernen sollten. Wenn ich damit fortfahre, werde ich vielleicht diesen Beitrag noch einmal besuchen und teilen, wie man die gleiche Funktionalität mit ES6 anstelle von jQuery erreicht, um zu zeigen, wie es gemacht werden kann.

Unabhängig davon, wenn Sie WordPress verwenden und jQuery seit Jahren verwenden, mit denen es verwendet wurde, fordere ich Sie dringend auf, die Bibliothek zu verlassen und einige der neueren Funktionen der Sprache zu lernen.

Persönlich lerne ich, indem ich es mache, und obwohl ich anfangs dazu neigte, standardmäßig jQuery zu verwenden, entschied ich mich für ES6 in einem Projekt, an dem wir derzeit auf Drängen eines Teamkollegen arbeiten .