Rimozione di elementi duplicati con JavaScript

Man mano che ES6 diventa sempre più popolare nello sviluppo web, è probabile che vedremo e scriveremo meno codice utilizzando altre librerie. Quando si tratta di WordPress, jQuery è ancora molto comune.

Personalmente, non penso che ci sia qualcosa di intrinsecamente sbagliato nell’usare jQuery (anche se potresti non averne bisogno ), ma penso anche che sia importante mantenere le tue abilità affilate e aggiornate con le nuove tecnologie.

Ma imparare a scrivere codice ES6 non è lo scopo di questo post, né come ottenere qualcosa usando ES6.

Invece, si tratta ancora di WordPress e jQuery. Tornerò su ES6 alla fine del post. Una delle cose che mi piacerebbe trattare, tuttavia, è come rimuovere elementi duplicati da un elenco con una proprietà comune.

Rimozione di elementi duplicati (tramite jQuery)

Più specificamente, supponiamo di avere un elenco di elementi – forse è un elenco ordinato, un elenco ordinato o anche solo un contenitore con un insieme di figli – e ogni figlio ha un insieme di proprietà.

Queste proprietà potrebbero essere attributi di classe, proprietà dei dati personalizzate o qualcosa del genere. Ad esempio, supponiamo di avere un elenco non ordinato e ogni elemento figlio ha una proprietà data-id.

Inoltre, supponiamo che l’elenco di elementi sia costruito dalla risposta di una determinata API in cui esistono duplicati nei dati. Certo, il lato server dovrebbe gestirlo, ma nei casi in cui non viene eseguito, può comunque essere eseguito sul lato client.

Ecco il codice per farlo con il commento sotto di esso:

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

Nota quanto segue:

• la funzione accetta un elenco di elementi avvolto in jQuery con figli,
• i figli di un elemento data-id utilizzato per determinare se esistono elementi duplicati,
• impostiamo un array per determinare se abbiamo già visto l’elemento,
• in caso contrario, lo aggiungiamo all’elenco; in caso contrario, lo rimuoviamo,
• infine, restituiamo l’elenco modificato e più aggiornato.

E questo è quasi riga per riga ciò che sta facendo il codice.

Personalmente, cerco di non usare le istruzioni if/else nel contesto di un ciclo (o anche al di fuori di un ciclo), ma ci sono momenti in cui non è una cattiva pratica farlo, e questo è uno di questi.

Allora, cos’era quello su ES6?

In precedenza, ho detto che ES6 è in aumento ed è qualcosa che noi sviluppatori dovremmo imparare. Mentre continuo a farlo, forse rivisiterò questo post e condividerò come ottenere la stessa funzionalità utilizzando ES6 anziché jQuery per mostrare come è possibile farlo.

Indipendentemente da ciò, se stai utilizzando WordPress e hai utilizzato jQuery per gli anni con cui è stato utilizzato, ti esorto a uscire dalla libreria e ad apprendere alcune delle nuove funzionalità del linguaggio.

Personalmente, imparo facendo, e sebbene avessi una propensione iniziale a impostare jQuery per impostazione predefinita, ho optato per ES6 in un progetto su cui stiamo attualmente lavorando su sollecitazione di un compagno di squadra.