de Knut Melvær

Cum să construiți condiționat un obiect în JavaScript cu ES6

Cum sa construiti conditionat un obiect in JavaScript cu ES6

Mutarea datelor generate de utilizatori între surse necesită adesea să verificați dacă un câmp are sau nu valori. Apoi construiți rezultatul pe baza acestui lucru. Acesta este modul în care puteți utiliza unele dintre caracteristicile ES6 în JavaScript pentru ao face mai concis.

De cand Sanity.io (unde lucrez) sponsorizat SintaxăAm jucat cu fluxuri RSS pentru podcast-uri în CLI-uri, Funcții Express și Serverless. Aceasta implică analiza și construirea obiectelor complexe cu o mulțime de câmpuri și informații. Deoarece aveți de-a face cu date generate de utilizatori din diferite surse, nu aveți garanția că câmpurile sunt populate tot timpul. Unele câmpuri sunt, de asemenea, opționale. Și nu doriți să afișați etichete fără valori într-un XML XML sau JSON FEED.

Anterior, m-aș ocupa de acest lucru aplicând chei noi pe un obiect ca acesta:

Acest lucru nu este tocmai lin (dar funcționează) și, dacă aveți o mulțime de câmpuri, veți ajunge în curând cu multe if- declarații. Aș putea, de asemenea, să fac lucruri ingenioase cu ajutorul tastelor obiect și așa mai departe. Asta ar însemna un cod puțin mai complicat și nu aveți nici o bună înțelegere a obiectului de date.

Din nou, o nouă sintaxă în ES6 vine în ajutor. Am găsit un model în care am putut rescrie codul în așa ceva:

Această funcție are câteva caracteristici. Primul este parametru destructurare obiect, care este un model bun dacă doriți să vă ocupați de o mulțime de argumente într-o funcție. Deci, în loc de acest model:

function episodeParser(data) {  const id = data.id  const title = data.title  // and so on...}

Tu scrii:

function({id, title}) {  // and so on...}

Acesta este, de asemenea, un mod bun de a evita să aveți mai multe argumente multiple într-o funcție. Rețineți și description = ‘No summary’ o parte din destructurarea obiectului. Aceasta este ceea ce numim implicit parametru. Înseamnă că dacă description este nedefinit, va fi definit cu șirul No summary ca o rezervă.

Al doilea este cele trei puncte răspândiți sintaxa (...). Se folosește pentru a „desface” obiectul dacă condiția este adevărată (asta este ceea ce && sunt pentru):

{  id: 'some-id',  ...(true && { optionalField: 'something'})}
// is the same as
{  id: 'some-id',  optionalField: 'something'}

Ceea ce veți ajunge este o funcție concisă îngrijită, care este, de asemenea, ușor de testat. O avertisment important cu utilizarea && operator este că numărul 0 va fi luat în considerare false. Deci, trebuie să fii atent la tipurile de date care intră.

Dacă punem funcția în acțiune, ar arăta cam așa:

Îl puteți vedea în acțiune în implementarea fluxurilor noastre de podcast pentru express.js și netlify lambdas. Dacă doriți să încercați singur Sanity.io pentru aceste implementări, poti sa te duci la sanity.io/freecodecamp și obțineți un plan de dezvoltator gratuit. ✨

Publicat inițial la www.sanity.io.