Mutta ES6-koodin kirjoittamisen oppiminen ei ole t\u00e4m\u00e4n viestin tarkoitus, eik\u00e4 my\u00f6sk\u00e4\u00e4n se, kuinka saavuttaa jotain ES6:lla.<\/p>\n Sen sijaan kyse on edelleen WordPressist\u00e4 ja jQueryst\u00e4. Palaan ES6:een viestin lopussa. Yksi asioista, joita haluaisin k\u00e4sitell\u00e4, on kuitenkin se, kuinka poistaa p\u00e4\u00e4llekk\u00e4iset kohteet luettelosta, jolla on yhteinen omaisuus.<\/p>\n Tarkemmin sanottuna oletetaan, ett\u00e4 sinulla on luettelo kohteista \u2013 ehk\u00e4 se on j\u00e4rjestetty luettelo, j\u00e4rjestetty luettelo tai jopa vain s\u00e4il\u00f6, jossa on joukko lapsia \u2013 ja jokaisella lapsella on joukko ominaisuuksia.<\/p>\n N\u00e4m\u00e4 ominaisuudet voivat olla luokkaattribuutteja, mukautettuja dataominaisuuksia tai jotain vastaavaa. Oletetaan esimerkiksi, ett\u00e4 meill\u00e4 on j\u00e4rjest\u00e4m\u00e4t\u00f6n luettelo ja jokaisella alikohteella on data-id-<\/strong> ominaisuus.<\/p>\n Oletetaan lis\u00e4ksi, ett\u00e4 kohteiden luettelo muodostetaan mink\u00e4 tahansa tietyn API:n vastauksesta, jos tiedoissa on kaksoiskappaleita. Toki palvelinpuolen pit\u00e4isi hoitaa t\u00e4m\u00e4, mutta tapauksissa, joissa se ei ole tehty, se voidaan silti tehd\u00e4 asiakaspuolella.<\/p>\n T\u00e4ss\u00e4 on koodi<\/a><\/strong> sen tekemiseen ja sen alla oleva kommentti:<\/p>\n Huomaa seuraavat asiat:<\/p>\n Ja t\u00e4m\u00e4 on melkein rivi rivilt\u00e4 mit\u00e4 koodi tekee.<\/p>\n Henkil\u00f6kohtaisesti yrit\u00e4n olla k\u00e4ytt\u00e4m\u00e4tt\u00e4 if\/else<\/strong> -lauseita silmukan yhteydess\u00e4 (tai edes silmukan ulkopuolella), mutta toisinaan se ei ole huono k\u00e4yt\u00e4nt\u00f6, ja t\u00e4m\u00e4 on yksi niist\u00e4.<\/p>\n Aiemmin mainitsin, ett\u00e4 ES6 on nousussa ja se on jotain, mit\u00e4 meid\u00e4n kehitt\u00e4jien pit\u00e4isi oppia. Kun jatkan niin, ehk\u00e4 palaan t\u00e4h\u00e4n viestiin ja kerron, kuinka saada samat toiminnot ES6:lla jQueryn sijaan n\u00e4ytt\u00e4\u00e4kseni, kuinka se voidaan tehd\u00e4.<\/p>\n Siit\u00e4 huolimatta, jos k\u00e4yt\u00e4t WordPressi\u00e4 ja olet k\u00e4ytt\u00e4nyt jQuery\u00e4 vuosien ajan, jonka kanssa sit\u00e4 on k\u00e4ytetty, kehotan sinua astumaan kirjaston ulkopuolelle ja oppimaan joitain kielen uudempia ominaisuuksia.<\/p>\n Henkil\u00f6kohtaisesti opin tekem\u00e4ll\u00e4, ja vaikka minulla oli alun perin taipumus k\u00e4ytt\u00e4\u00e4 oletusarvoisesti jQuery\u00e4, p\u00e4\u00e4tin valita ES6:n kanssa projektissa, jonka parissa<\/a><\/strong> ty\u00f6skentelemme parhaillaan tiimitoverin kehotuksesta<\/a><\/strong>.<\/p>\n![\"P\u00e4\u00e4llekk\u00e4isten](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e762088909c.png\")
<\/a><\/p>\nP\u00e4\u00e4llekk\u00e4isten kohteiden poistaminen (jQueryn kautta)<\/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
Joten mit\u00e4 se oli ES6: sta?<\/h2>\n
![\"P\u00e4\u00e4llekk\u00e4isten](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164265-61e7620d6d683.png\")
<\/a><\/p>\n