Usuwanie zduplikowanych elementów za pomocą JavaScript

Ponieważ ES6 staje się coraz bardziej popularny w tworzeniu stron internetowych, prawdopodobnie będziemy widzieć – i pisać – mniej kodu przy użyciu innych bibliotek. Jeśli chodzi o WordPress, jQuery jest nadal bardzo popularne.

Osobiście nie uważam, że jest coś z natury złego w korzystaniu z jQuery (chociaż możesz go nie potrzebować ), ale uważam również, że ważne jest, aby Twoje umiejętności były ostre i na bieżąco z nowszymi technologiami.

Ale nauka pisania kodu w ES6 nie jest celem tego postu, ani nie jest sposobem na osiągnięcie czegoś za pomocą ES6.

Zamiast tego nadal chodzi o WordPress i jQuery. Wrócę do ES6 na końcu wpisu. Jedną z rzeczy, którą chciałbym omówić, jest usuwanie zduplikowanych elementów z listy o wspólnej właściwości.

Usuwanie zduplikowanych elementów (poprzez jQuery)

Mówiąc dokładniej, załóżmy, że masz listę elementów — być może jest to uporządkowana lista, uporządkowana lista lub nawet kontener z zestawem elementów potomnych — i każdy element potomny ma zestaw właściwości.

Te właściwości mogą być atrybutami klasy, niestandardowymi właściwościami danych lub czymś podobnym. Załóżmy na przykład, że mamy listę nieuporządkowaną, a każdy element podrzędny ma właściwość data-id.

Ponadto załóżmy, że lista elementów jest tworzona na podstawie odpowiedzi dowolnego danego interfejsu API, w którym istnieją duplikaty danych. Oczywiście, strona serwera powinna sobie z tym poradzić, ale w przypadkach, w których nie jest to zrobione, nadal można to zrobić po stronie klienta.

Oto kod, jak to zrobić, z komentarzem poniżej:

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

Zwróć uwagę na następujące kwestie:

• funkcja akceptuje opakowaną w jQuery listę elementów z dziećmi,
• dzieci elementu identyfikatora danych, który służy do określenia, czy istnieją zduplikowane elementy,
• ustawiamy tablicę, aby określić, czy widzieliśmy przedmiot wcześniej,
• jeśli nie, dodajemy go do listy; w przeciwnym razie usuwamy go,
• na koniec zwracamy zmodyfikowaną, bardziej zaktualizowaną listę.

I to jest prawie wiersz po wierszu, co robi kod.

Osobiście staram się nie używać instrukcji if/else w kontekście pętli (lub nawet poza pętlą), ale zdarzają się sytuacje, w których nie jest to złą praktyką, a to jest jedna z nich.

Więc co to było z ES6?

Wcześniej wspomniałem, że ES6 rośnie i jest to coś, czego my, jako deweloperzy, powinniśmy się uczyć. Ponieważ nadal to robię, być może powrócę do tego postu i podzielę się tym, jak osiągnąć tę samą funkcjonalność przy użyciu ES6 zamiast jQuery, aby pokazać, jak można to zrobić.

Niezależnie od tego, jeśli korzystasz z WordPressa i od lat używasz jQuery, zachęcam Cię do wyjścia poza bibliotekę i zapoznania się z niektórymi nowszymi funkcjami języka.

Osobiście uczę się przez działanie i chociaż początkowo miałem skłonność do domyślnego korzystania z jQuery, zdecydowałem się na ES6 w projekcie, nad którym obecnie pracujemy za namową kolegi z zespołu.