Mais apprendre \u00e0 \u00e9crire du code ES6 n’est pas le but de cet article, ni comment r\u00e9aliser quelque chose en utilisant ES6.<\/p>\n Au lieu de cela, il s’agit toujours de WordPress et de jQuery. Je reviendrai sur ES6 \u00e0 la fin du post. L’une des choses que j’aimerais couvrir, cependant, est de savoir comment supprimer les \u00e9l\u00e9ments en double d’une liste avec une propri\u00e9t\u00e9 commune.<\/p>\n Plus pr\u00e9cis\u00e9ment, supposons que vous ayez une liste d’\u00e9l\u00e9ments – peut-\u00eatre une liste ordonn\u00e9e, une liste ordonn\u00e9e ou m\u00eame simplement un conteneur avec un ensemble d’enfants – et chaque enfant a un ensemble de propri\u00e9t\u00e9s.<\/p>\n Ces propri\u00e9t\u00e9s peuvent \u00eatre des attributs de classe, des propri\u00e9t\u00e9s de donn\u00e9es personnalis\u00e9es ou quelque chose comme \u00e7a. Par exemple, supposons que nous ayons une liste non ordonn\u00e9e et que chaque \u00e9l\u00e9ment enfant ait une propri\u00e9t\u00e9 data-id<\/strong>.<\/p>\n De plus, disons que la liste des \u00e9l\u00e9ments est construite \u00e0 partir de la r\u00e9ponse d’une API donn\u00e9e o\u00f9 des doublons existent dans les donn\u00e9es. Bien s\u00fbr, le c\u00f4t\u00e9 serveur devrait g\u00e9rer cela, mais dans les cas o\u00f9 ce n’est pas fait, cela peut toujours \u00eatre fait c\u00f4t\u00e9 client.<\/p>\n Voici le code<\/a><\/strong> pour le faire avec le commentaire ci-dessous:<\/p>\n Notez ce qui suit\u00a0:<\/p>\n Et c’est presque ligne par ligne ce que fait le code.<\/p>\n Personnellement, j’essaie de ne pas utiliser d’instructions if\/else<\/strong> dans le contexte d’une boucle (ou m\u00eame en dehors d’une boucle), mais il y a des moments o\u00f9 ce n’est pas une mauvaise pratique de le faire, et c’en est une.<\/p>\n Plus t\u00f4t, j’ai mentionn\u00e9 que ES6 est en hausse et c’est quelque chose que nous, en tant que d\u00e9veloppeurs, devrions apprendre. Comme je continue \u00e0 le faire, je vais peut-\u00eatre revoir ce post et partager comment obtenir la m\u00eame fonctionnalit\u00e9 en utilisant ES6 plut\u00f4t que jQuery pour montrer comment cela peut \u00eatre fait.<\/p>\n Quoi qu’il en soit, si vous utilisez WordPress et que vous utilisez jQuery depuis des ann\u00e9es, je vous exhorte \u00e0 sortir de la biblioth\u00e8que et \u00e0 apprendre certaines des nouvelles fonctionnalit\u00e9s du langage.<\/p>\n Personnellement, j’apprends en faisant, et m\u00eame si j’avais une propension initiale \u00e0 utiliser par d\u00e9faut jQuery, j’ai opt\u00e9 pour ES6 dans un projet sur lequel nous<\/a><\/strong> travaillons actuellement \u00e0 la demande d’un co\u00e9quipier<\/a><\/strong>.<\/p>\n![\"Suppression](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e762088909c.png\")
<\/a><\/p>\nSuppression des \u00e9l\u00e9ments en double (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
Alors, qu’en \u00e9tait-il de l’ES6\u00a0?<\/h2>\n
![\"Suppression](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e7620d6d683.png\")
<\/a><\/p>\n