Eliminar elementos duplicados con JavaScript

A medida que ES6 se vuelve cada vez más popular en el desarrollo web, es probable que veamos y escribamos menos código usando otras bibliotecas. Cuando se trata de WordPress, jQuery sigue siendo muy común.

Personalmente, no creo que haya nada intrínsecamente malo en el uso de jQuery (aunque es posible que no lo necesite ), pero también creo que es importante mantener sus habilidades afiladas y actualizadas con las tecnologías más nuevas.

Pero aprender a escribir código ES6 no es el propósito de esta publicación, ni tampoco cómo lograr algo usando ES6.

En cambio, todavía se trata de WordPress y jQuery. Volveré a ES6 al final de la publicación. Sin embargo, una de las cosas que me encantaría cubrir es cómo eliminar elementos duplicados de una lista con una propiedad común.

Eliminación de elementos duplicados (a través de jQuery)

Más específicamente, supongamos que tiene una lista de elementos, tal vez sea una lista ordenada, una lista ordenada o incluso solo un contenedor con un conjunto de elementos secundarios, y cada elemento secundario tiene un conjunto de propiedades.

Estas propiedades pueden ser atributos de clase, propiedades de datos personalizadas o algo así. Por ejemplo, supongamos que tenemos una lista desordenada y cada elemento secundario tiene una propiedad de identificación de datos.

Además, digamos que la lista de elementos se construye a partir de la respuesta de cualquier API dada donde existen duplicados en los datos. Claro, el lado del servidor debe manejar esto, pero en los casos en que no se hace, aún se puede hacer en el lado del cliente.

Aquí está el código para hacerlo con el comentario debajo:

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

Tenga en cuenta lo siguiente:

• la función acepta una lista envuelta en jQuery de elementos con elementos secundarios,
• los elementos secundarios de un elemento de identificación de datos que se utiliza para determinar si existen elementos duplicados,
• configuramos una matriz para determinar si hemos visto el elemento antes,
• si no, lo agregamos a la lista; de lo contrario, lo eliminamos,
• finalmente, devolvemos la lista modificada y más actualizada.

Y eso es casi línea por línea lo que está haciendo el código.

Personalmente, trato de no usar declaraciones if/else dentro del contexto de un bucle (o incluso fuera de un bucle), pero hay momentos en los que no es una mala práctica hacerlo, y este es uno de ellos.

Entonces, ¿qué fue eso de ES6?

Anteriormente, mencioné que ES6 está en aumento y es algo que nosotros, como desarrolladores, deberíamos estar aprendiendo. A medida que continúe haciéndolo, tal vez vuelva a visitar esta publicación y comparta cómo lograr la misma funcionalidad usando ES6 en lugar de jQuery para mostrar cómo se puede hacer.

De todos modos, si está usando WordPress y ha estado usando jQuery durante los años que se ha usado, le insto a que salga de la biblioteca y aprenda algunas de las características más nuevas del lenguaje.

Personalmente, aprendo haciendo, y aunque tenía una propensión inicial a usar jQuery de forma predeterminada, opté por ES6 en un proyecto en el que estamos trabajando actualmente a instancias de un compañero de equipo.