Removendo itens duplicados com JavaScript

À medida que o ES6 se torna cada vez mais popular no desenvolvimento web, provavelmente veremos – e escreveremos – menos código usando outras bibliotecas. Quando se trata de WordPress, jQuery ainda é muito comum.

Pessoalmente, não acho que haja algo inerentemente errado em usar jQuery (embora você possa não precisar ), mas também acho importante manter suas habilidades afiadas e atualizadas com as tecnologias mais recentes.

Mas aprender a escrever código ES6 não é o objetivo deste post, nem é como conseguir algo usando ES6.

Em vez disso, ainda é sobre WordPress e jQuery. Voltarei ao ES6 no final do post. Uma das coisas que eu adoraria abordar, porém, é como remover itens duplicados de uma lista com uma propriedade comum.

Removendo itens duplicados (via jQuery)

Mais especificamente, vamos supor que você tenha uma lista de itens – talvez seja uma lista ordenada, uma lista ordenada ou até mesmo um contêiner com um conjunto de filhos – e cada filho tenha um conjunto de propriedades.

Essas propriedades podem ser atributos de classe, propriedades de dados personalizadas ou algo assim. Por exemplo, digamos que temos uma lista não ordenada e cada item filho tem uma propriedade data-id.

Além disso, digamos que a lista de itens seja construída a partir da resposta de qualquer API em que existam duplicatas nos dados. Claro, o lado do servidor deve lidar com isso, mas nos casos em que não é feito, ainda pode ser feito no lado do cliente.

Aqui está o código para fazer isso com o comentário abaixo:

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

Observe o seguinte:

• a função aceita uma lista de itens encapsulada em jQuery com filhos,
• os filhos de um elemento data-id que é usado para determinar se existem itens duplicados,
• configuramos um array para determinar se já vimos o item antes,
• se não, adicionamos à lista; caso contrário, nós o removemos,
• finalmente, retornamos a lista modificada e mais atualizada.

E isso é quase linha por linha o que o código está fazendo.

Pessoalmente, tento não usar instruções if/else dentro do contexto de um loop (ou mesmo fora de um loop), mas há momentos em que não é uma prática ruim fazê-lo, e esse é um deles.

Então, o que foi isso sobre ES6?

Anteriormente, mencionei que o ES6 está em alta e é algo que nós, como desenvolvedores, devemos aprender. À medida que continuar fazendo isso, talvez eu revisite este post e compartilhe como obter a mesma funcionalidade usando ES6 em vez de jQuery para mostrar como isso pode ser feito.

Independentemente disso, se você estiver usando o WordPress e estiver usando jQuery nos anos em que foi usado, peço que você saia da biblioteca e aprenda alguns dos recursos mais recentes da linguagem.

Pessoalmente, eu aprendo fazendo, e embora eu tivesse uma propensão inicial para usar como padrão o jQuery, optei por ir com o ES6 em um projeto no qual estamos trabalhando atualmente por insistência de um colega de equipe.