JavaScript Object Destructuring

Sammendrag: I denne opplæringen lærer Du Om JavaScript object destructuring som tilordner egenskapene til et objekt til individuelle variabler.

hvis du vil lære å ødelegge en matrise, kan du sjekke ut array destructuring tutorial.

Introduksjon til JavaScript-objektdestruktureringsoppgaven

Anta at du har et person – objekt med to egenskaper: firstName og lastName.

Code language: JavaScript (javascript)

Før ES6, når DU vil tilordne egenskaper for person – objektet til variabler, gjør du det vanligvis slik:

Code language: JavaScript (javascript)

ES6 introduserer objektdestruktureringssyntaksen som gir en alternativ måte å tilordne egenskaper til et objekt til variabler:

Code language: JavaScript (javascript)

i dette eksemplet er egenskapene firstName og lastName tilordnet variablene fName og lName.

I denne syntaksen:

Code language: JavaScript (javascript)

identifikatoren før kolon (:) er egenskapen til objektet og identifikatoren etter kolon er variabelen.

Legg Merke til at egenskapsnavnet alltid er til venstre, enten det er en objekt bokstavelig eller objektdestruktureringssyntaks.

hvis variablene har samme navn som egenskapene til objektet, kan du gjøre koden mer kortfattet som følger:

Code language: JavaScript (javascript)

i dette eksemplet erklærte vi to variabler firstName og lastName, og tilordnet egenskapene til personobjektet til variablene i samme setning.

det er mulig å skille deklarasjonen og oppgaven. Du må imidlertid omgi variablene i parentes:

Hvis du ikke bruker parentesene, Vil JavaScript-motoren tolke venstre side som en blokk og kaste en syntaksfeil.

når du tilordner en egenskap som ikke finnes til en variabel ved hjelp av objektdestrukturering, er variabelen satt til undefined. For eksempel:

Code language: JavaScript (javascript)

i dette eksemplet finnes ikke egenskapen middleName i objektet person, derfor er variabelen middleName undefined.

Angi standardverdier

du kan tilordne en standardverdi til variabelen når egenskapen til et objekt ikke finnes. Eksempelvis:

Code language: JavaScript (javascript)

i dette eksemplet tilordnet vi den tomme strengen til middleName – variabelen når personobjektet ikke har egenskapen middleName.

vi tilordner også currentAge – egenskapen til age – variabelen med standardverdien 18.

men når personobjektet har egenskapen middleName, fungerer tildelingen som vanlig:

Code language: JavaScript (javascript)

Destrukturering av et nullobjekt

en funksjon kan returnere et objekt eller null i noen situasjoner. For eksempel:

Code language: JavaScript (javascript)

Og du bruker objektdestruktureringsoppgaven:

Code language: JavaScript (javascript)

koden vil kaste en TypeError:

Code language: JavaScript (javascript)

for å unngå dette kan du bruke operatoren OR (||) til å tilbakeføre objektet null til et tomt objekt:

Code language: JavaScript (javascript)

Nå vil ingen feil oppstå. Og firstName og lastName vil være undefined.

nestet objektdestrukturering

Forutsatt at du har et employee objekt som har et name objekt som egenskap:

Code language: JavaScript (javascript)

følgende setning ødelegger egenskapene til det nestede name – objektet i individuelle variabler:

Code language: JavaScript (javascript)

det er mulig å gjøre flere tildelinger av en egenskap til flere variabler:

Code language: JavaScript (javascript)

Funksjonsargumenter

Anta at du har en funksjon som viser personobjektet:

Code language: JavaScript (javascript)

det er mulig å ødelegge objektargumentet som gikk inn i funksjonen som dette:

Code language: JavaScript (javascript)

det ser mindre detaljert ut, spesielt når du bruker mange egenskaper av argumentobjektet. Denne teknikken brukes ofte I React.

Sammendrag

• objektdestrukturering tilordner egenskapene til et objekt til variabler med samme navn som standard.