Päällekkäisten kohteiden poistaminen JavaScriptillä

Kun ES6:sta tulee yhä suositumpi verkkokehityksessä, tulemme todennäköisesti näkemään ja kirjoittamaan vähemmän koodia muiden kirjastojen avulla. Mitä tulee WordPressiin, jQuery on edelleen hyvin yleinen.

Henkilökohtaisesti en usko, että jQueryn käytössä ole luonnostaan ​​mitään vikaa (vaikka et ehkä tarvitse sitä ), mutta mielestäni on myös tärkeää pitää taitosi terävinä ja ajan tasalla uudempien teknologioiden kanssa.

Mutta ES6-koodin kirjoittamisen oppiminen ei ole tämän viestin tarkoitus, eikä myöskään se, kuinka saavuttaa jotain ES6:lla.

Sen sijaan kyse on edelleen WordPressistä ja jQuerystä. Palaan ES6:een viestin lopussa. Yksi asioista, joita haluaisin käsitellä, on kuitenkin se, kuinka poistaa päällekkäiset kohteet luettelosta, jolla on yhteinen omaisuus.

Päällekkäisten kohteiden poistaminen (jQueryn kautta)

Tarkemmin sanottuna oletetaan, että sinulla on luettelo kohteista – ehkä se on järjestetty luettelo, järjestetty luettelo tai jopa vain säilö, jossa on joukko lapsia – ja jokaisella lapsella on joukko ominaisuuksia.

Nämä ominaisuudet voivat olla luokkaattribuutteja, mukautettuja dataominaisuuksia tai jotain vastaavaa. Oletetaan esimerkiksi, että meillä on järjestämätön luettelo ja jokaisella alikohteella on data-id- ominaisuus.

Oletetaan lisäksi, että kohteiden luettelo muodostetaan minkä tahansa tietyn API:n vastauksesta, jos tiedoissa on kaksoiskappaleita. Toki palvelinpuolen pitäisi hoitaa tämä, mutta tapauksissa, joissa se ei ole tehty, se voidaan silti tehdä asiakaspuolella.

Tässä on koodi sen tekemiseen ja sen alla oleva kommentti:

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

Huomaa seuraavat asiat:

• toiminto hyväksyy jQuery-kääreen luettelon kohteista, joissa on lapsia,
• data-id- elementin jälkeläiset, joita käytetään määrittämään, onko olemassa päällekkäisiä kohteita,
• määritämme taulukon määrittääksemme, olemmeko nähneet kohteen aiemmin,
• jos ei, lisäämme sen luetteloon; muuten poistamme sen,
• lopuksi palautamme muokatun, päivitetyn luettelon.

Ja tämä on melkein rivi riviltä mitä koodi tekee.

Henkilökohtaisesti yritän olla käyttämättä if/else -lauseita silmukan yhteydessä (tai edes silmukan ulkopuolella), mutta toisinaan se ei ole huono käytäntö, ja tämä on yksi niistä.

Joten mitä se oli ES6: sta?

Aiemmin mainitsin, että ES6 on nousussa ja se on jotain, mitä meidän kehittäjien pitäisi oppia. Kun jatkan niin, ehkä palaan tähän viestiin ja kerron, kuinka saada samat toiminnot ES6:lla jQueryn sijaan näyttääkseni, kuinka se voidaan tehdä.

Siitä huolimatta, jos käytät WordPressiä ja olet käyttänyt jQueryä vuosien ajan, jonka kanssa sitä on käytetty, kehotan sinua astumaan kirjaston ulkopuolelle ja oppimaan joitain kielen uudempia ominaisuuksia.

Henkilökohtaisesti opin tekemällä, ja vaikka minulla oli alun perin taipumus käyttää oletusarvoisesti jQueryä, päätin valita ES6:n kanssa projektissa, jonka parissa työskentelemme parhaillaan tiimitoverin kehotuksesta.