Ta bort dubbletter av objekt med JavaScript

När ES6 blir mer och mer populärt inom webbutveckling, kommer vi sannolikt att se – och skriva – mindre kod med andra bibliotek. När det kommer till WordPress är jQuery fortfarande väldigt vanligt.

Personligen tycker jag inte att det är något fel i sig med att använda jQuery (även om du kanske inte behöver det) men jag tror också att det är viktigt att hålla dina kunskaper skarpa och uppdaterade med nyare teknologier.

Men att lära sig skriva ES6-kod är inte syftet med det här inlägget, och inte heller hur man uppnår något med ES6.

Istället handlar det fortfarande om WordPress och jQuery. Jag återkommer till ES6 i slutet av inlägget. En av de saker jag skulle vilja täcka är dock hur man tar bort dubbletter från en lista med en gemensam egendom.

Ta bort dubbletter av objekt (via jQuery)

Mer specifikt, låt oss anta att du har en lista med objekt – kanske är det en beställd lista, en beställd lista eller till och med bara en behållare med en uppsättning underordnade – och varje barn har en uppsättning egenskaper.

Dessa egenskaper kan vara klassattribut, anpassade dataegenskaper eller något liknande. Låt oss till exempel säga att vi har en oordnad lista och varje underordnad objekt har en data-id- egenskap.

Låt oss vidare säga att listan över objekt är konstruerad från svaret från ett givet API där dubbletter finns i data. Visst bör serversidan hantera detta, men i de fall det inte görs kan det fortfarande göras på klientsidan.

Här är koden för att göra det med kommentaren under:

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

Observera följande:

• funktionen accepterar en jQuery-omsluten lista över objekt med barn,
• barnen till ett data-id- element som används för att avgöra om det finns dubbletter av objekt,
• vi ställer in en array för att avgöra om vi har sett objektet tidigare,
• om inte, lägger vi till det i listan; annars tar vi bort det,
• slutligen returnerar vi den ändrade, mer uppdaterade listan.

Och det är nästan rad för rad vad koden gör.

Personligen försöker jag att inte använda if/else- satser inom ramen för en loop (eller ens utanför en loop), men det finns tillfällen då det inte är en dålig praxis att göra det, och det här är en av dem.

Så vad var det med ES6?

Tidigare nämnde jag att ES6 är på frammarsch och det är något som vi som utvecklare borde lära oss. När jag fortsätter att göra det kanske jag återkommer till det här inlägget och delar med mig av hur man uppnår samma funktionalitet med ES6 snarare än jQuery för att visa hur det kan göras.

Oavsett, om du använder WordPress och har använt jQuery under de år som det har använts, uppmanar jag dig att gå utanför biblioteket och lära dig några av de nyare funktionerna i språket.

Personligen lär jag mig genom att göra, och även om jag hade en initial benägenhet att använda jQuery som standard, valde jag att gå med ES6 i ett projekt som vi för närvarande arbetar med på uppmaning av en lagkamrat.