3 Praktiske anvendelser af objektdestrukturering i JavaScript

Skriv renere kode ved hjælp af disse destruktionsmønstre

I øjeblikket er du sandsynligvis ret fortrolig med destruktion i JavaScript! Det kom tilbage til os i 2015 i ES6-specifikationen, men hvis du har brug for det, har Mozilla en stor dybdegående artikel om, hvordan det fungerer.

At vide, hvordan destruktion fungerer, er ikke det samme som at vide, hvordan man bruger det. Her er tre ødelæggende mønstre, du kan bruge til at gøre din kode renere, mere robust og mere læsbar!

1. Navngivne funktionsargumenter

Navngivne argumenter er en alternativ måde at håndtere funktionsparametre snarere end efter position. I stedet for at bestille dine argumenter i samme rækkefølge som funktionssignaturen, specificerer du blot argumentet ved navn. For eksempel i Python:

Som du kan se, er rækkefølgen af ​​argumenterne ikke vigtige - du specificerer dem bare ved navn. Fordelene ved navngivne argumenter kontra position er:

  1. Du kan afbryde en eller flere parametre, når du ringer til funktionen
  2. Orden betyder ikke noget, når der gives argumenter.
  3. Mere læselig kode, når du ringer til en funktion, der muligvis findes andre steder

Selvom ægte navngivne argumenter ikke findes i JavaScript, kan vi bruge et ødelæggende mønster til at opnå alle de 3 fordele. Her er den samme kode som ovenfor, men i JavaScript:

Dette mønster rammer alle vores mål for navngivne argumenter. Vi var i stand til at afbryde argumentet c, rækkefølgen betyder ikke noget, og vi tildeler vores argument ved at henvise dem ved navn. Dette gøres alt muligt ved at ødelægge genstande.

2. Analyser en serverreaktion rent

Vi er ofte kun interesserede i datablokken eller endda en bestemt værdi i datablokken i et serverrespons. Hvis det er tilfældet, kan du bruge destruktion til kun at gribe den værdi, mens du ignorerer en masse af de andre ting, som en server typisk sender tilbage. Her er et eksempel:

Dette mønster giver dig mulighed for at trække værdier ud fra et objekt, når dine argumenter analyseres. Du får også oprette standarder gratis! Hvilket bringer os til det tredje mønster ...

3. Indstilling af standardværdier under tildelingen

Et almindeligt tilfælde, når der tildeles variabler eller konstanter, er at have en standardværdi, hvis der ikke findes en anden værdi i omfanget.

Før du ødelægger, kunne du gøre noget i denne retning for at opnå den ønskede adfærd:

// gammel måde at indstille standardværdier på
var nightMode = userSettings.nightMode || falsk

Men dette kræver en individuel kodelinje for hver opgave. Med destruktion kan du tage dig af alle dine opgaver og deres standarder på én gang:

Dette destruktionsmønster kan anvendes til opsætningstilstand i dine React-komponenter!

Jeg håber, du er i stand til at anvende nogle af disse mønstre på din kode! Tjek nedenstående links for at lære mere om destruktion.

Lær mere!