Moderne JavaScript har mange nye funktioner, der gør det nemt at skrive kode på en enkel og struktureret måde. En af de praktiske moderne funktioner, der er tilgængelige i ES6+, er array- og objektdestrukturering.
JavaScript-rammer som React.js og Angular opfordrer til brugen af denne teknik. Så det er vigtigt at forstå, hvad destrukturering handler om, og hvordan man bruger det, mens man skriver kode.
Hvad er objekt- og array-destrukturering i JavaScript?
Destrukturering i JavaScript refererer til processen med udpakning af værdier fra en matrix eller et objekt. Det giver en mere kortfattet måde at hente værdier fra arrays eller objekter uden tunge løft, når du er interesseret i individuelle array-elementer eller værdier i et objekt.
Det er også nyttigt, når du behandler returnerende værdier fra en kompleks funktion eller et komplekst udtryk. Dette koncept er et af de bedste praksis, du bør følge, mens du skriver React-kode.
Sådan destruktureres arrays
Her er en prøvekode for at få en følelse af array-destrukturering:
konst arr = [1, 2];
konst [a, b] = arr;
konsol.log (a) // udskriver 1 på konsollen
konsol.log (b) // udskriver 2 på konsollen
Denne kode bruger destrukturering til at tildele værdierne fra arr—1 og 2—til variablerne -en og b, henholdsvis. Dette er det grundlæggende koncept bag destrukturering. Du har et array eller et objekt i højre side, og du pakker varer ud og tildeler dem til individuelle variabler i venstre side.
Under motorhjelmen kopierer JavaScript værdier fra arr og tildeler dem til variablerne i venstre side som sådan:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Som du kan se, er destrukturering en mere kortfattet måde at gøre dette på, i modsætning til at bruge objekt- eller parentesnotationen. Denne syntaks vil dog sandsynligvis være nyttig, når du arbejder med komplekse arrays eller funktioner, der returnerer arrays eller strenge.
Tjek eksempelkoden nedenfor:
konst [dag, måned, dato, år, tid, tidszone] = Dato().dele(' ')
// Calling Date() returnerer den aktuelle dato i formatet:
// Man 20. feb. 2023 13:07:29 GMT+0000
konsol.log (dag) // udskriver man
konsol.log (måned) // udskriver feb
konsol.log (dato) // udskriver 20
I dette kodeeksempel opretter vi en ny streng med den aktuelle dato ved at ringe Dato(). Dernæst bruger vi dele(), a JavaScript streng metode, for at adskille elementer i strengen med mellemrum som skilletegn. split(' ') returnerer et array, og vi bruger destrukturering til at tildele værdierne til individuelle variabler.
Husk, at hvis dit array indeholder flere varer, end du pakker ud, vil JavaScript ignorere de ekstra elementer.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
konsol.log (a) // udskriver 1
konsol.log (b) // udskriver 2
// værdierne 3 og 4 er ikke tildelt nogen variabel; de ignoreres
I dette tilfælde, hvis du vil gemme de resterende elementer i en variabel, skal du bruge en hvileparameter som sådan:
konst arr = [1, 2, 3, 4];
konst [a, b,... resten] = arr;
konsol.log (rest) // udskriver [3,4]
Nogle gange er du måske ligeglad med en bestemt vare. JavaScripts destruktureringsmønster giver dig også mulighed for at springe visse elementer over ved at bruge et tomt komma.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
konsol.log (c) // udskriver 3
Koden ovenfor bruger det tomme rum til at ignorere værdi 2 i arrayet arr. I stedet for at tildele værdi 2 til at variere c, springer den til næste element i arrayet. Den ignorerer også den fjerde værdi, fordi den ikke angiver en variabel at gemme den i.
I modsætning hertil, hvis du har brug for færre varer, end du pakker ud, vil processen tildele udefineret værdi til de ekstra variabler.
konst arr = [1];
konst [a, b] = arr;
konsol.log (a) // udskriver 1
konsol.log (b) // udskriver udefineret
For at forhindre udefinerede variabler kan du indstille standardværdier, hvis du ikke er sikker på matrixlængden som følger (at tildele standardværdier er ikke et krav):
konst arr = [1];
konst [a = '10', b = 'ikke med'] = arr;
konsol.log (a) // udskriver 1
konsol.log (b) // udskriver "ikke angivet"
Denne destrukturering tildeler værdien 1 til at variere -en, og overskriver dens standardværdi. Variabel b beholder sin standard, fordi der ikke er angivet en værdi.
Sådan destruktureres objekter
Destrukturering af objekter er ikke så forskellig fra arrays. Den eneste forskel er, at arrays er iterable og objekter ikke, hvilket resulterer i en lidt anderledes måde at gøre tingene på.
Når du arbejder med objekter, initialiseres variablerne i venstre side af tildelingsoperatoren også som objekter:
konst person = {navn: 'Alvin', alder: 10, højde: 1};
konst {navn, alder, højde} = person;
konsol.log (navn) // udskriver 'Alvin'
konsol.log (højde) // udskriver 1
Fra koden bruger vi egenskabsnavne fra person objekt. Du behøver dog ikke bruge de nøjagtige egenskabsnavne i objektet. Du kan destrukturere og gemme værdierne i forskellige variabelnavne som følger:
konst person = {navn: 'Alvin', alder: 10, højde: 1};
konst {navn: fornavn, alder: flere år, højde: currentHeight} = person;
konsol.log (fornavn) // udskriver 'Alvin'
konsol.log (currentHeight) // udskriver 1
Du starter med at angive den egenskabsværdi, du vil destrukturere, og derefter angive det variabelnavn, du vil bruge til at gemme værdien efter et kolon. Og ligesom arrays vil destrukturering af et ejendomsnavn, der ikke eksisterer, være det udefineret.
For at håndtere dette kan du på samme måde angive standardværdier, hvis det egenskabsnavn, du vil tildele en variabel, ikke er tilgængeligt:
konst person = {navn: 'Alvin', alder: 10, højde: 1};
konst {name, age, height, location='I hele verden'} = person;
konsol.log (navn) // udskriver 'Alvin'
konsol.log (placering) // udskriver 'Worldwide'
Rækkefølgen af variabler på venstre side betyder ikke noget med et objekt, da objekterne gemmer værdier i nøgleværdi-par. Som sådan vil følgende kode give de samme resultater:
konst person = {navn: 'Alvin', alder: 10, højde: 1};
konst {alder, højde, navn} = person;
konsol.log (navn) // udskriver 'Alvin'
konsol.log (højde) // udskriver 1
Til sidst, i lighed med arrays, kan du også bruge restparameteren til at destrukturere flere værdier i en variabel som sådan:
konst person = {navn: 'Alvin', alder: 10, højde: 1};
konst {navn, ...rest} = person;
konsol.log (navn) // udskriver 'Alvin'
konsol.log (rest) // udskriver { alder: 10, højde: 1 }
Bemærk blot, at hvileparameteren altid skal komme sidst. Ellers vil JavaScript give en undtagelse.
Forbedre din kodekvalitet med JavaScripts destrukturering
Javascripts moderne funktioner, såsom destrukturering, gør dig i stand til at skrive meget læsbar kode. Ved hjælp af destrukturering kan du hurtigt pakke værdier ud fra arrays og objekter. Destrukturering kan også vise sig praktisk i andre situationer, som at bytte værdier af to variable. Forhåbentlig forstår du nu, hvad destrukturering betyder i JavaScript, og du kan være i stand til at bruge det, mens du skriver kode.
