Dubleerivate üksuste eemaldamine JavaScriptiga

Kuna ES6 muutub veebiarenduses üha populaarsemaks, näeme ja kirjutame tõenäoliselt vähem koodi, kasutades teisi teeke. Kui rääkida WordPressist, siis jQuery on endiselt väga levinud.

Isiklikult arvan, et jQuery kasutamisel pole midagi valesti (kuigi te ei pruugi seda vajada ), kuid arvan ka, et on oluline hoida oma oskused teravad ja uuemate tehnoloogiatega kursis.

Kuid ES6 koodi kirjutamise õppimine pole selle postituse eesmärk ega ka see, kuidas ES6 abil midagi saavutada.

Selle asemel on see ikkagi WordPressi ja jQuery kohta. ES6 juurde tulen tagasi postituse lõpus. Üks asi, mida tahaksin hea meelega käsitleda, on see, kuidas eemaldada ühise varaga loendist dubleerivad üksused.

Dubleerivate üksuste eemaldamine (jQuery kaudu)

Täpsemalt oletame, et teil on üksuste loend – võib-olla on see järjestatud loend, järjestatud loend või isegi lihtsalt konteiner lastekomplektiga – ja igal lapsel on atribuutide komplekt.

Need atribuudid võivad olla klassiatribuudid, kohandatud andmete atribuudid või midagi sellist. Näiteks oletame, et meil on järjestamata loend ja igal alamüksusel on atribuut data-id .

Lisaks oletame, et üksuste loend koostatakse mis tahes antud API vastusest, mille andmetes on duplikaadid. Muidugi peaks sellega hakkama saama serveripool, kuid kui seda ei tehta, saab seda siiski teha kliendi poolel.

Siin on kood selle tegemiseks koos selle all oleva kommentaariga:

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

Pange tähele järgmist.

• funktsioon aktsepteerib jQuery mähitud lastega üksuste loendit,
• dubleerivate üksuste olemasolu kindlakstegemiseks kasutatava data-id elemendi alamüksused,
• seadistame massiivi, et teha kindlaks, kas oleme seda üksust varem näinud,
• kui ei, lisame selle loendisse; muidu eemaldame selle,
• lõpuks tagastame muudetud ja uuendatud loendi.

Ja see on peaaegu rida-realt, mida kood teeb.

Isiklikult püüan tsükli kontekstis (või isegi väljaspool tsüklit) if/else -lauseid mitte kasutada, kuid mõnikord pole see halb tava, ja see on üks neist.

Mis see ES6 kohta oli?

Varem mainisin, et ES6 on tõusuteel ja see on midagi, mida me arendajatena peaksime õppima. Kui ma seda jätkan, vaatan võib-olla selle postituse uuesti üle ja jagan, kuidas saavutada sama funktsionaalsus ES6-ga, mitte jQueryga, et näidata, kuidas seda teha.

Sellest hoolimata, kui kasutate WordPressi ja olete kasutanud jQueryt juba aastaid, mil seda on kasutatud, soovitan teil tungivalt raamatukogust välja astuda ja õppida keele uusimaid funktsioone.

Mina isiklikult õpin tegutsedes ja kuigi mul oli algne kalduvus jQuery vaikeseadet kasutada, otsustasin kasutada ES6-ga projekti, mille kallal me meeskonnakaaslase õhutusel praegu töötame .