Sådan bruges Objektdestrukturering i JavaScript

objektdestrukturering er en nyttig JavaScript-funktion til at udtrække egenskaber fra objekter og binde dem til variabler.

hvad er bedre, objektdestrukturering kan udtrække flere egenskaber i en sætning, kan få adgang til Egenskaber fra indlejrede objekter og kan indstille en standardværdi, hvis egenskaben ikke findes.

i dette indlæg forklarer jeg, hvordan man bruger objektdestrukturering i JavaScript.

1. Behovet for objektdestrukturering

Forestil dig, at du gerne vil udtrække nogle egenskaber ved et objekt. I et pre-ES2015-miljø skal du skrive følgende kode:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

egenskaben hero.name værdi er tildelt til variablen name. Samme måde hero.realName værdi er tildelt realName.

sådan en måde at få adgang til Egenskaber og tildele dem til variabler kræver standardtekst kode. Ved at skrive var name = hero.name skal du nævne name bindingen 2 gange, og det samme for realName.

det er her syntaksen for objektdestrukturering er nyttig: du kan læse en egenskab og tildele dens værdi til en variabel uden at duplikere egenskabsnavnet. Mere end det kan du læse flere egenskaber fra det samme objekt i kun en erklæring!

lad os refactor ovenstående script og anvende objektdestruktureringen for at få adgang til egenskaberne name og realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero er en objekt destrukturering opgave. Denne erklæring definerer variablerne name og realName og tildeler dem derefter værdierne for egenskaber hero.name og hero.realName tilsvarende.

sammenligning af de 2 tilgange for at få adgang til objektegenskaberne:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

det er synligt, at objektdestruktureringen er mere praktisk, fordi hverken egenskabsnavnene eller objektvariablen duplikeres.

2. Udtrækning af en egenskab

den grundlæggende syntaks for objektdestrukturering er ret enkel:

const { identifier } = expression;

hvor identifier er navnet på ejendommen, der skal åbnes, og expression skal evalueres til et objekt. Efter destruktureringen indeholder variablen identifier egenskabsværdien.

her er den tilsvarende kode ved hjælp af en ejendomsadgang:

const identifier = expression.identifier;

lad os prøve objektets ødelæggelse i praksis:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

erklæringen const { name } = hero definerer variablen name og initialiserer den med værdien af hero.name ejendom.

3. Udpakning af flere egenskaber

for at ødelægge objektet i flere egenskaber skal du opregne så mange egenskaber, som du vil tilføje kommaer , imellem:

const { identifier1, identifier2, ..., identifierN } = expression;

hvor identifier1,…, identifierN er navne på egenskaber, der skal åbnes, og expression skal evalueres til et objekt. Efter destruktureringen indeholder variablerne identifier1,…, identifierN tilsvarende egenskabsværdier.

her er den tilsvarende kode:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

lad os se igen på eksemplet fra det første afsnit, hvor 2 egenskaber udvindes:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero opretter 2 variabler name og realName tildelt med værdier af tilsvarende egenskaber hero.nameog hero.realName.

4. Standardværdier

hvis det destrukturerede objekt ikke har den egenskab, der er angivet i destruktureringstildelingen, tildeles variablen undefined. Lad os se, hvordan det sker:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

efter destrukturering er variablen enemies undefined, fordi egenskaben enemiesikke findes i objektet hero.

heldigvis kan du indstille en standardværdi, hvis ejendommen ikke findes i det destruerede objekt. Her er den grundlæggende syntaks:

const { identifier = defaultValue } = expression;

hvor identifier er navnet på ejendommen, der skal åbnes, og expression skal evalueres til et objekt. Efter destruktureringen indeholder variablen identifier egenskabsværdien eller tildeles defaultValue hvis identifier egenskab ikke findes.

her er den tilsvarende kode:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

lad os ændre den forrige kodeeksempel og bruge standardværdifunktionen:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

nu, i stedet for at være undefined, er variablen enemies standard til .

5. Aliaser

hvis du vil oprette variabler med andre navne end egenskaberne, kan du bruge funktionen aliasing af objektdestrukturering.

const { identifier: aliasIdentifier } = expression;

identifier er navnet på den egenskab, der skal åbnes, aliasIdentifier er variabelnavnet, og expression skal evalueres til et objekt. Efter destruktureringen indeholder variablen aliasIdentifier egenskabsværdien.

den tilsvarende kode:

const aliasIdentifier = expression.identifier;

her er et eksempel på objekt destrukturering alias funktion:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

når man ser på const { realName: secretName } = hero, definerer destruktureringen en ny variabel secretName(aliasvariabel) og tildeler den værdien hero.realName.

6. Udtrækning af egenskaber fra indlejrede objekter

i de foregående eksempler var objekterne almindelige: egenskaberne har primitive datatyper (f.eks. strenge).

ofte kan objekter indlejres i andre objekter. Med andre ord kan nogle egenskaber indeholde objekter.

i så fald kan du stadig bruge objektdestrukturerings-og adgangsegenskaberne fra dyb. Her er den grundlæggende syntaks:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp er navnet på den ejendom, der indeholder et indlejret objekt. identifier er egenskabsnavnet for at få adgang fra det indlejrede objekt. expression bør evaluere til det destruerede objekt.

efter destruktureringen indeholder variablen identifier egenskabsværdien af det indlejrede objekt.

ovenstående syntaks svarer til:

const identifier = expression.nestedObjectProp.identifier;

niveauet af indlejring, du kan udtrække egenskaber fra, er ubegrænset. Hvis du vil udtrække egenskaber fra dyb, skal du blot tilføje flere indlejrede krøllede seler:

const { propA: { propB: { propC: { .... } } } } = object;

for eksempel indeholder objektet hero et indlejret objekt { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

objektets ødelæggelse const { address: { city } } = hero giver dig adgang til egenskaben city fra det indlejrede objekt.

7. Udpakning af en dynamisk navneegenskab

du kan udpakke egenskaber til variabler med et dynamisk navn (egenskabsnavnet er kendt ved kørsel):

const { : identifier } = expression;

propName udtrykket skal evalueres til et egenskabsnavn (normalt en streng), og identifier skal angive det variabelnavn, der er oprettet efter destruktureringen. Den anden expression skal evaluere til det objekt, du gerne vil destruere.

en ækvivalent kode uden objekt ødelæggelse:

const identifier = expression;

lad os se på et eksempel, hvor prop har egenskabsnavnet:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero er en objektdestrukturering, der tildeler variabel name værdien hero, hvor prop er en variabel med egenskabsnavnet.

8. Rest objekt efter destrukturering

resten syntaks er nyttigt at indsamle de resterende egenskaber efter destrukturering:

const { identifier, ...rest } = expression;

hvor identifier er navnet på ejendommen, der skal åbnes, og expression skal evalueres til et objekt.

efter destruktureringen indeholder variablen identifier egenskabsværdien. rest variabel er et almindeligt objekt med de resterende egenskaber.

lad os for eksempel udtrække ejendommen name, men hold resten af egenskaberne:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

destruktureringen const { name, ...realHero } = hero udtrækker egenskaben name.

samtidig samles de resterende egenskaber (realName i dette tilfælde) i variablen realHero: { realName: 'Bruce Wayne' }.

9. Almindelige brugssager

9.1 Bind egenskaber til variabler

som det ses i mange eksempler før, binder objektdestruktureringen egenskabsværdier til variabler.

objektdestruktureringen kan tildele værdier til variabler, der er erklæret ved hjælp af const, letog var. Eller endda tildele til en allerede eksisterende variabel.

for eksempel, her er hvordan man destrukturerer ved hjælp af let erklæring:

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

sådan destrueres ved hjælp af var erklæring:

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

og hvordan man destruerer til en allerede erklæret variabel:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

jeg finder det tilfredsstillende at kombinere for..of cyklus med objekt ødelæggelse for at udtrække ejendommen med det samme:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 Funktionsparameter destrukturering

generelt kan objektdestruktureringen placeres hvor som helst, hvor en opgave sker.

for eksempel kan du ødelægge et objekt lige inde i parameterlisten for en funktion:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) destrukturerer funktionsparameteren, hvilket skaber en variabel name, der holder værdien af name ejendom.

10. Resume

objektdestruktureringen er en kraftfuld funktion, der giver dig mulighed for at udtrække egenskaber fra et objekt og binde disse værdier til variabler.

jeg kan især godt lide objektdestrukturering er den kortfattede syntaks og evnen til at udtrække flere variabler i en erklæring.

forhåbentlig har mit indlæg hjulpet dig med at se, hvor nyttigt objekt ødelæggelse er!