Moderne JavaScript med ES6-ES13 (JS-vejledning)

Destrukturering i JavaScript: Værdier fra objekter og arrays

Alle videoer i tutorialen Moderne JavaScript med ES6–ES13 (JS-vejledning)

Destructuring i JavaScript er en nyttig teknik, der giver dig mulighed for at udtrække specifikke værdier fra objekter og arrays. Dette resulterer i en mere elegant og kompakt kode, så du skal bruge mindre tid på at skrive. Lad os se på, hvordan du kan bruge destructuring effektivt i dine projekter.

Vigtigste indsigter

  • Destructuring muliggør nem udtrækning af værdier fra objekter og arrays.
  • Mutationer af variabler kan undgås ved at omdøbe under destructuring.
  • Denne teknik kan betydeligt forbedre læsbarheden af din kode, især når det gælder om at returnere flere værdier fra funktioner.

Trin-for-trin vejledning

Grundlæggende om Destructuring af objekter

Først tager vi et kig på brugen af destructuring med objekter. Du kan starte med et simpelt objekt, der har to egenskaber. Opret et objekt med egenskaberne x og y:

Destrukturering i JavaScript: Optimale værdier fra objekter og arrays udtrække

For at udtrække værdierne fra disse egenskaber ville den traditionelle metode kræve to separate tildelinger:

const x = obj.x;
const y = obj.y;
Destrukturering i JavaScript: Optimale værdier fra objekter og arrays udtrække

Dette er dog besværligt, da vi skal gentage den samme tildeling for hver egenskab.

Med denne syntaks nævnes objektet obj på højre side, og egenskaberne x og y skrives på venstre side i krøllede parenteser. Lad os tjekke resultatet:

Fleksibilitet ved valg af egenskaber

En af de nyttige egenskaber ved destructuring er fleksibiliteten i valget af variabler. Du behøver ikke at udtrække alle egenskaber; du kan også kun vælge x, y eller en kombination af begge.

Omdøbning af variabler under destructuring

Destructuring gør det også muligt for dig at omdøbe variabler for at undgå konflikter med allerede eksisterende navne. Hvis du har returværdien fra en funktion, kan du ændre navnet på variablen ved at bruge kolon:

Antag, at du modtager objektet fra en funktion, der hedder getCoordinates.

Destructuring af arrays – En anden tilgang

Udover objekter kan destructuring også bruges til arrays. Hvis du har en funktion, der returnerer et array, kan du også her nemt tildele værdierne:

Her er det vigtigt at bemærke, at du erstatter krøllede parenteser med firkantede parenteser. Det betyder, at variablerne tildeles i den rækkefølge, de optræder i arrayet.

Udeladelse af værdier i arrayet

En anden nyttig anvendelse af destructuring med arrays er muligheden for at ignorere unødvendige værdier.

Destrukturering i JavaScript: Optimal værdier fra objekter og arrays udtrække

Her bliver b ignoreret, og værdierne gemmes kun i variablerne a og c.

Resumé - Destructuring i JavaScript: Elegant udtrækning af værdier fra objekter og arrays

Destructuring er en elegant måde at udtrække værdier fra objekter og arrays i JavaScript. Det forbedrer læsbarheden og effektiviteten af din kode ved at give dig mulighed for at deklarere flere værdier i én enkelt linje. Desuden kan du med denne teknik håndtere konflikter med eksisterende variabelnavne og elegant udelade unødvendige værdier.

Ofte stillede spørgsmål

Hvordan fungerer Destructuring i JavaScript?Destructuring er en syntaks, der gør det muligt for dig at udtrække elementer fra arrays og objekter nemt og tildele variabler.

Kan jeg kun destructurere dele af et objekt?Ja, du kan specifikt udtrækkge kun de egenskaber, du har brug for.

Hvordan omdøber jeg variabler, når jeg bruger dem under Destructuring?Det kan du gøre ved at bruge et kolon efterfulgt af det nye variabelnavn, f.eks. { prop: newName }.

Kan jeg også bruge Destructuring til arrays?Ja, du kan også bruge Destructuring til arrays ved at anvende firkantede parenteser for at udtrække værdierne.

Kan jeg undertrykke en værdi i Destructuring?Ja, det er muligt ved simpelthen at lade en tom plads være i Destructuring_ARRAY.