Mas aprender a escrever c\u00f3digo ES6 n\u00e3o \u00e9 o objetivo deste post, nem \u00e9 como conseguir algo usando ES6.<\/p>\n Em vez disso, ainda \u00e9 sobre WordPress e jQuery. Voltarei ao ES6 no final do post. Uma das coisas que eu adoraria abordar, por\u00e9m, \u00e9 como remover itens duplicados de uma lista com uma propriedade comum.<\/p>\n Mais especificamente, vamos supor que voc\u00ea tenha uma lista de itens \u2013 talvez seja uma lista ordenada, uma lista ordenada ou at\u00e9 mesmo um cont\u00eainer com um conjunto de filhos \u2013 e cada filho tenha um conjunto de propriedades.<\/p>\n Essas propriedades podem ser atributos de classe, propriedades de dados personalizadas ou algo assim. Por exemplo, digamos que temos uma lista n\u00e3o ordenada e cada item filho tem uma propriedade data-id<\/strong>.<\/p>\n Al\u00e9m disso, digamos que a lista de itens seja constru\u00edda 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\u00e3o \u00e9 feito, ainda pode ser feito no lado do cliente.<\/p>\n Aqui est\u00e1 o c\u00f3digo<\/a><\/strong> para fazer isso com o coment\u00e1rio abaixo:<\/p>\n Observe o seguinte:<\/p>\n E isso \u00e9 quase linha por linha o que o c\u00f3digo est\u00e1 fazendo.<\/p>\n Pessoalmente, tento n\u00e3o usar instru\u00e7\u00f5es if\/else<\/strong> dentro do contexto de um loop (ou mesmo fora de um loop), mas h\u00e1 momentos em que n\u00e3o \u00e9 uma pr\u00e1tica ruim faz\u00ea-lo, e esse \u00e9 um deles.<\/p>\n Anteriormente, mencionei que o ES6 est\u00e1 em alta e \u00e9 algo que n\u00f3s, como desenvolvedores, devemos aprender. \u00c0 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.<\/p>\n Independentemente disso, se voc\u00ea estiver usando o WordPress e estiver usando jQuery nos anos em que foi usado, pe\u00e7o que voc\u00ea saia da biblioteca e aprenda alguns dos recursos mais recentes da linguagem.<\/p>\n Pessoalmente, eu aprendo fazendo, e embora eu tivesse uma propens\u00e3o inicial para usar como padr\u00e3o o jQuery, optei por ir com o ES6 em um projeto no qual estamos<\/a><\/strong> trabalhando atualmente por insist\u00eancia de um colega de equipe<\/a><\/strong>.<\/p>\n![\"Removendo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e762088909c.png\")
<\/a><\/p>\nRemovendo itens duplicados (via jQuery)<\/h2>\n
\/**\n * Removes duplicates from the specified array of items; however, this function\n * assumes that $items is an unordered list of items with child elements.\n *\n * @param $items An unordered list of products with duplicaten children.\n * @return $items An unordered list of products no duplicate children.\n *\n * @private\n *\/\nvar _removeDuplicates = function($items) {\n\n var unique = {},\n dataItemId = -1;\n\n $items\n .children()\n .each(function() {\n dataItemId = $(this).attr('data-id');\n if (unique[dataItemId]) {\n $(this).remove();\n } else {\n unique[dataItemId] = true;\n }\n });\n\n return $item;\n};<\/code><\/pre>\n\n
Ent\u00e3o, o que foi isso sobre ES6?<\/h2>\n
![\"Removendo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e7620d6d683.png\")
<\/a><\/p>\n