Slik Bruker Du Objektdestrukturering I JavaScript

objektdestrukturering er en nyttig JavaScript-funksjon for å trekke ut egenskaper fra objekter og binde dem til variabler.

hva er bedre, objektdestrukturering kan trekke ut flere egenskaper i en setning, kan få tilgang til egenskaper fra nestede objekter, og kan angi en standardverdi hvis egenskapen ikke finnes.

i dette innlegget vil jeg forklare hvordan du bruker objektdestrukturering I JavaScript.

1. Behovet for objektdestrukturering

Tenk Deg at du vil trekke ut noen egenskaper av et objekt. I et miljø før ES2015 må 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'

egenskapen hero.name – verdien er tilordnet variabelen name. Samme måte hero.realName verdien er tilordnet realName.

En slik måte å få tilgang til egenskaper og tilordne dem til variabler krever standardtekstkode. Ved å skrive var name = hero.name må du nevne name bindingen 2 ganger, og det samme for realName.

det er her objektdestruktureringssyntaksen er nyttig: du kan lese en egenskap og tilordne verdien til en variabel uten å duplisere egenskapsnavnet. Mer enn det, kan du lese flere egenskaper fra samme objekt i bare ett utsagn!

La oss refactor skriptet ovenfor og bruke objektdestrukturering for å få tilgang til egenskapene 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 objektdestruktureringsoppgave. Denne setningen definerer variablene name og realName , og tilordner deretter verdiene av egenskaper hero.name og hero.realName tilsvarende.

Sammenligne de 2 tilnærmingene for å få tilgang til objektegenskapene:

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

det er synlig at objektdestruktureringen er bedre fordi verken egenskapsnavnene eller objektvariabelen dupliseres.

2. Utpakking av en eiendom

den grunnleggende syntaksen til objektdestrukturering er ganske enkel:

const { identifier } = expression;

hvor identifier er navnet på egenskapen til access og expression skal evalueres til et objekt. Etter destruktureringen inneholder variabelen identifier egenskapsverdien.

her er den tilsvarende koden ved hjelp av en egenskapstilbehør:

const identifier = expression.identifier;

la oss prøve objektdestruktureringen i praksis:

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

setningen const { name } = hero definerer variabelen name og initialiserer den med verdien hero.name – egenskapen.

3. Trekke ut flere egenskaper

hvis du vil ødelegge objektet i flere egenskaper, nummerere så mange egenskaper som du vil legge til komma , i mellom:

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

Hvor identifier1,…, identifierN er navn på egenskaper for access, og expression skal evalueres til et objekt. Etter destruktureringen inneholder variablene identifier1,…, identifierN tilsvarende egenskapsverdier.

her er den tilsvarende koden:

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

La oss ta en titt igjen på eksemplet fra den første delen, hvor 2 egenskaper ekstraheres:

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

const { name, realName } = hero oppretter 2 variabler name og realName tilordnet med verdier av tilsvarende egenskaper hero.name og hero.realName.

4. Standardverdier

hvis det destruerte objektet ikke har egenskapen som er angitt i destruksjonstildelingen, tilordnes variabelen undefined. La oss se hvordan det skjer:

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

etter destruksjon er variabelen enemies undefined fordi egenskapen enemies ikke finnes i objektet hero.

Heldigvis kan Du angi en standardverdi hvis egenskapen ikke finnes i det destruerte objektet. Her er den grunnleggende syntaksen:

const { identifier = defaultValue } = expression;

hvor identifier er navnet på egenskapen til access og expression skal evalueres til et objekt. Etter destruktureringen inneholder variabelen identifier egenskapsverdien eller tilordnes defaultValue hvis identifier – egenskapen ikke finnes.

her er den tilsvarende koden:

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

la oss endre den forrige kodeeksemplet, og bruke standardverdien funksjonen:

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

nå, i stedet for å være undefined, er variabelen enemies standard til .

5. Aliaser

hvis du vil opprette variabler med forskjellige navn enn egenskapene, kan du bruke aliasing-funksjonen for objektdestrukturering.

const { identifier: aliasIdentifier } = expression;

identifier er navnet på egenskapen til access, aliasIdentifier er variabelnavnet, og expression skal evalueres til et objekt. Etter destruktureringen inneholder variabelen aliasIdentifier egenskapsverdien.

den tilsvarende koden:

const aliasIdentifier = expression.identifier;

Her er et eksempel på objekt destrukturering alias funksjon:

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

når man ser på const { realName: secretName } = hero, definerer destucturing en ny variabel secretName (aliasvariabel), og tilordner den verdien hero.realName.

6. Utpakking av egenskaper fra nestede objekter

i de foregående eksemplene var objektene rene: egenskapene har primitive datatyper (f.eks. strenger).

ofte kan objekter nestes i andre objekter. Med andre ord kan noen egenskaper inneholde objekter.

i så fall kan du fortsatt bruke objektdestrukturering og tilgangsegenskaper fra deep. Her er den grunnleggende syntaksen:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp er navnet på egenskapen som inneholder et nestet objekt. identifier er egenskapsnavnet for access fra det nestede objektet. expression skal evaluere til det destruerte objektet.

etter destruktureringen inneholder variabelen identifier egenskapsverdien for det nestede objektet.

syntaksen ovenfor er ekvivalent med:

const identifier = expression.nestedObjectProp.identifier;

nivået på nesting du kan trekke ut egenskaper fra er ubegrenset. Hvis du vil trekke ut egenskaper fra dyp, bare legg til flere nestede krøllete bånd:

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

objektet hero inneholder for eksempel et nestet objekt { city: 'Gotham'}.

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

objektdestrukturering const { address: { city } } = hero gir deg tilgang til egenskapen city fra det nestede objektet.

7. Trekke ut en dynamisk navnegenskap

du kan trekke ut til variabelegenskaper med et dynamisk navn (egenskapsnavnet er kjent under kjøring):

const { : identifier } = expression;

propName uttrykket skal evalueres til et egenskapsnavn (vanligvis en streng), og identifier skal angi variabelnavnet som er opprettet etter destruktureringen. Den andre expression skal evaluere til objektet du vil ødelegge.

en ekvivalent kode uten objektdestrukturering:

const identifier = expression;

La oss se på et eksempel der prop har egenskapsnavnet:

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

const { : name } = hero er en objektdestrukturering som tilordner variabel name verdien hero, der prop er en variabel som holder egenskapsnavnet.

8. Rest objekt etter destrukturering

rest syntaks er nyttig å samle de gjenværende egenskapene etter destrukturering:

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

hvor identifier er navnet på egenskapen til access og expression skal evalueres til et objekt.

etter destruktureringen inneholder variabelen identifier egenskapsverdien. rest variabel er et vanlig objekt med de gjenværende egenskapene.

la oss for eksempel trekke ut egenskapen name, men behold resten av egenskapene:

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

destruktureringen const { name, ...realHero } = hero trekker ut egenskapen name.

samtidig samles de gjenværende egenskapene (realName i dette tilfellet) inn i variabelen realHero: { realName: 'Bruce Wayne' }.

9. Vanlige brukstilfeller

9.1 Bind egenskaper til variabler

som vist i mange eksempler før, binder objektdestruktureringen egenskapsverdier til variabler.

objektdestruktureringen kan tilordne verdier til variabler deklarert ved hjelp av const, let og var. Eller til og med tilordne til en allerede eksisterende variabel.

for eksempel, her er hvordan du destruerer ved hjelp av let – setningen:

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

hvordan destructure bruker var statement:

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

Og hvordan destrueres til en allerede deklarert variabel:

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

jeg finner det tilfredsstillende å kombinere for..of syklus med objektdestrukturering for å trekke ut eiendommen med en gang:

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

9.2 Funksjonsparameter destrukturering

vanligvis kan objektdestrukturering plasseres hvor som helst der en oppgave skjer.

for eksempel kan du ødelegge et objekt rett innenfor parameterlisten til en funksjon:

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

function({ name }) destruerer funksjonsparameteren, og oppretter en variabel name som holder verdien av name – egenskapen.

10. Sammendrag

objektdestrukturering er en kraftig funksjon som lar deg trekke ut egenskaper fra et objekt og binde disse verdiene til variabler.

jeg liker spesielt om objektdestrukturering er kortfattet syntaks og evne til å trekke ut flere variabler i en setning.

Forhåpentligvis har innlegget mitt hjulpet deg med å se hvor nyttig objektdestrukturering er!