Moderne JavaScript har mange nye funksjoner som gjør det enkelt å skrive kode på en enkel og strukturert måte. En av de praktiske moderne funksjonene som er tilgjengelige i ES6+ er array- og objektdestrukturering.
JavaScript-rammeverk som React.js og Angular oppmuntrer til bruk av denne teknikken. Så det er viktig å forstå hva destrukturering handler om og hvordan du bruker det mens du skriver kode.
Hva er objekt- og array-destrukturering i JavaScript?
Destrukturering i JavaScript refererer til prosessen med å pakke ut verdier fra en matrise eller et objekt. Det gir en mer kortfattet måte å hente verdier fra matriser eller objekter uten tunge løft når du er interessert i individuelle matriseelementer eller verdier i et objekt.
Det er også nyttig når du behandler returnerende verdier fra en kompleks funksjon eller uttrykk. Dette konseptet er en av de beste fremgangsmåter du bør følge mens du skriver React-kode.
Hvordan destrukturere matriser
Her er en eksempelkode for å få en følelse av array-destrukturering:
konst arr = [1, 2];
konst [a, b] = arr;
konsoll.log (a) // skriver ut 1 på konsollen
konsoll.log (b) // skriver ut 2 på konsollen
Denne koden bruker destrukturering for å tilordne verdiene fra arr—1 og 2—til variablene en og b, henholdsvis. Dette er det grunnleggende konseptet bak destrukturering. Du har en matrise eller et objekt på høyre side, og du pakker ut varer og tilordner dem til individuelle variabler på venstre side.
Under panseret kopierer JavaScript verdier fra arr og tildeler dem til variablene på venstre side slik:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Som du kan se, er destrukturering en mer kortfattet måte å gjøre dette på, i motsetning til å bruke objekt- eller parentesnotasjonen. Imidlertid vil denne syntaksen sannsynligvis være nyttig når du arbeider med komplekse matriser eller funksjoner som returnerer matriser eller strenger.
Sjekk eksempelkoden nedenfor:
konst [dag, måned, dato, år, tid, tidssone] = Dato().dele(' ')
// Calling Date() returnerer gjeldende dato i formatet:
// Man 20. februar 2023 13:07:29 GMT+0000
konsoll.log (dag) // trykker man
konsoll.log (måned) // trykker feb
konsoll.log (dato) // trykker 20
I dette kodeeksemplet oppretter vi en ny streng med gjeldende dato ved å ringe Dato(). Deretter bruker vi dele(), a JavaScript-strengmetode, for å skille elementer i strengen ved å bruke mellomrom som skilletegn. split(' ') returnerer en matrise, og vi bruker destrukturering for å tilordne verdiene til individuelle variabler.
Husk at hvis matrisen inneholder flere varer enn du pakker ut, vil JavaScript ignorere de ekstra elementene.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konsoll.log (a) // skriver ut 1
konsoll.log (b) // skriver ut 2
// verdier 3 og 4 er ikke tilordnet noen variabel; de blir ignorert
I dette tilfellet, hvis du vil lagre de gjenværende elementene i en variabel, bruk en hvileparameter slik:
konst arr = [1, 2, 3, 4];
konst [a, b,... resten] = arr;
konsoll.log (rest) // skriver ut [3,4]
Noen ganger bryr du deg kanskje ikke om en bestemt vare. JavaScripts destruktureringsmønster lar deg også hoppe over visse elementer ved å bruke et tomt komma.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konsoll.log (c) // skriver ut 3
Koden ovenfor bruker det tomme rommet til å ignorere verdi 2 i matrisen arr. I stedet for å tildele verdi 2 å variere c, hopper den til neste element i matrisen. Den ignorerer også den fjerde verdien fordi den ikke spesifiserer en variabel å lagre den i.
I motsetning, hvis du trenger færre varer enn du pakker ut, vil prosessen tildele udefinert verdi til de ekstra variablene.
konst arr = [1];
konst [a, b] = arr;
konsoll.log (a) // skriver ut 1
konsoll.log (b) // skriver ut udefinert
For å forhindre at variabler er udefinerte, kan du angi standardverdier hvis du ikke er sikker på matriselengden som følger (å tilordne standardverdier er ikke et krav):
konst arr = [1];
konst [a = '10', b = 'ikke inkludert'] = arr;
konsoll.log (a) // skriver ut 1
konsoll.log (b) // skriver ut "ikke oppgitt"
Denne destruktureringen tildeler verdien 1 å variere en, og overskriver standardverdien. Variabel b beholder standarden fordi en verdi ikke er oppgitt.
Hvordan destrukturere objekter
Å destrukturere objekter er ikke så forskjellig fra arrays. Den eneste forskjellen er at arrays er iterable og objekter ikke, noe som resulterer i en litt annen måte å gjøre ting på.
Når du arbeider med objekter, initialiseres også variablene på venstre side av tildelingsoperatøren som objekter:
konst person = {Navn: 'Alvin', alder: 10, høyde: 1};
konst {navn, alder, høyde} = person;
konsoll.log (navn) // skriver ut "Alvin"
konsoll.log (høyde) // skriver ut 1
Fra koden bruker vi egenskapsnavn fra person gjenstand. Du trenger imidlertid ikke bruke de eksakte egenskapsnavnene i objektet. Du kan destrukturere og lagre verdiene i forskjellige variabelnavn som følger:
konst person = {Navn: 'Alvin', alder: 10, høyde: 1};
konst {Navn: fornavn, alder: år, høyde: currentHeight} = person;
konsoll.log (fornavn) // skriver ut "Alvin"
konsoll.log (currentHeight) // skriver ut 1
Du starter med å spesifisere egenskapsverdien du vil destrukturere, og deretter spesifisere variabelnavnet du skal bruke for å lagre verdien etter et kolon. Og i likhet med matriser vil det å destrukturere et eiendomsnavn som ikke eksisterer udefinert.
For å håndtere dette kan du på samme måte spesifisere standardverdier i tilfelle egenskapsnavnet du vil tilordne til en variabel ikke er tilgjengelig:
konst person = {Navn: 'Alvin', alder: 10, høyde: 1};
konst {name, age, height, location='Verdensomspennende'} = person;
konsoll.log (navn) // skriver ut "Alvin"
konsoll.log (sted) // skriver ut 'Worldwide'
Rekkefølgen av variabler på venstre side spiller ingen rolle med et objekt siden objektene lagrer verdier i nøkkelverdi-par. Som sådan vil følgende kode gi de samme resultatene:
konst person = {Navn: 'Alvin', alder: 10, høyde: 1};
konst {alder, høyde, navn} = person;
konsoll.log (navn) // skriver ut "Alvin"
konsoll.log (høyde) // skriver ut 1
Til slutt, i likhet med matriser, kan du også bruke hvileparameteren til å destrukturere flere verdier i en variabel slik:
konst person = {Navn: 'Alvin', alder: 10, høyde: 1};
konst {navn, ...rest} = person;
konsoll.log (navn) // skriver ut "Alvin"
konsoll.log (rest) // skriver ut { alder: 10, høyde: 1 }
Bare merk at hvileparameteren alltid må komme sist. Ellers vil JavaScript gi et unntak.
Forbedre kodekvaliteten din med JavaScripts destrukturering
Javascripts moderne funksjoner, som destrukturering, gjør at du kan skrive svært lesbar kode. Ved å bruke destrukturering kan du raskt pakke ut verdier fra matriser og objekter. Destrukturering kan også være nyttig i andre situasjoner, som å bytte verdier av to variabler. Forhåpentligvis forstår du nå hva destrukturering betyr i JavaScript, og du kan være i stand til å bruke det mens du skriver kode.
