JavaScript Object Destructuring

Resume: i denne vejledning lærer du om JavaScript object destructuring, der tildeler egenskaber for et objekt til individuelle variabler.

hvis du vil lære at destruere et array, kan du tjekke vejledningen til array destructuring.

Introduktion til JavaScript object destructuring-opgaven

Antag, at du har et person objekt med to egenskaber: firstNameog lastName.

Code language: JavaScript (javascript)

før ES6, når du vil tildele egenskaber for person objektet til variabler, gør du det typisk sådan:

Code language: JavaScript (javascript)

ES6 introducerer syntaksen for objektdestrukturering, der giver en alternativ måde at tildele egenskaber for et objekt til variabler:

Code language: JavaScript (javascript)

i dette eksempel tildeles egenskaberne firstName og lastName til henholdsvis variablerne fName og lName.

i denne syntaks:

Code language: JavaScript (javascript)

identifikatoren før tyktarmen (:) er objektets egenskab, og identifikatoren efter tyktarmen er variablen.

Bemærk, at egenskabsnavnet altid er til venstre, uanset om det er en objekt bogstavelig eller objekt destrukturering syntaks.

hvis variablerne har de samme navne som objektets egenskaber, kan du gøre koden mere kortfattet som følger:

Code language: JavaScript (javascript)

i dette eksempel erklærede vi to variabler firstName og lastName og tildelte egenskaberne for personobjektet til variablerne i den samme erklæring.

det er muligt at adskille erklæringen og opgaven. Du skal dog omgive variablerne i parentes:

hvis du ikke bruger parenteserne, fortolker JavaScript-motoren venstre side som en blok og kaster en syntaksfejl.

når du tildeler en egenskab, der ikke findes, til en variabel ved hjælp af objektdestruktureringen, indstilles variablen til undefined. For eksempel:

Code language: JavaScript (javascript)

i dette eksempel findes egenskaben middleName ikke i objektet person, derfor er variablen middleNameundefined.

Indstilling af standardværdier

du kan tildele en standardværdi til variablen, når egenskaben for et objekt ikke findes. Eksempel:

Code language: JavaScript (javascript)

i dette eksempel tildelte vi den tomme streng til variablen middleName, når personobjektet ikke har egenskaben middleName.

vi tildeler også egenskaben currentAge til variablen age med standardværdien på 18.

men når personobjektet har egenskaben middleName, fungerer opgaven som sædvanlig:

Code language: JavaScript (javascript)

Destrukturering af et null-objekt

en funktion kan returnere et objekt eller null i nogle situationer. For eksempel:

Code language: JavaScript (javascript)

og du bruger opgaven object destructuring:

Code language: JavaScript (javascript)

koden vil kaste en TypeError:

Code language: JavaScript (javascript)

for at undgå dette kan du bruge OR operatoren (||) til at tilbagekalde null objektet til et tomt objekt:

Code language: JavaScript (javascript)

nu vil der ikke opstå nogen fejl. Og firstName og lastName vil være undefined.

indlejret objekt destrukturering

forudsat at du har et employee objekt, der har et name objekt som egenskaben:

Code language: JavaScript (javascript)

følgende erklæring ødelægger egenskaberne for det indlejrede name objekt i individuelle variabler:

Code language: JavaScript (javascript)

det er muligt at gøre flere tildeling af en egenskab til flere variabler:

Code language: JavaScript (javascript)

destruktureringsfunktionsargumenter

Antag, at du har en funktion, der viser personobjektet:

Code language: JavaScript (javascript)

det er muligt at destruere objektargumentet, der er gået ind i funktionen som denne:

Code language: JavaScript (javascript)

det ser mindre detaljeret ud, især når du bruger mange egenskaber ved argumentobjektet. Denne teknik bruges ofte i React.

Resume

• Objektdestrukturering tildeler egenskaberne for et objekt til variabler med de samme navne som standard.