JavaScript Object Destructuring

sammanfattning: i denna handledning lär du dig om JavaScript object destructuring som tilldelar egenskaper för ett objekt till enskilda variabler.

om du vill lära dig att förstöra en array kan du kolla in array destructuring tutorial.

introduktion till JavaScript-objektet destructuring tilldelning

anta att du har en person objekt med två egenskaper: firstName och lastName.

Code language: JavaScript (javascript)

före ES6, när du vill tilldela egenskaper för person – objektet till variabler, gör du det vanligtvis så här:

Code language: JavaScript (javascript)

ES6 introducerar object destructuring syntax som ger ett alternativt sätt att tilldela egenskaper hos ett objekt till variabler:

Code language: JavaScript (javascript)

i det här exemplet tilldelas egenskaperna firstName och lastName variablerna fName respektive lName.

i denna syntax:

Code language: JavaScript (javascript)

identifieraren före kolon (:) är egenskapen för objektet och identifieraren efter kolon är variabeln.

Lägg märke till att egenskapsnamnet alltid finns till vänster om det är en objektbokstav eller objektförstörande syntax.

om variablerna har samma namn som objektets egenskaper kan du göra koden mer kortfattad enligt följande:

Code language: JavaScript (javascript)

i det här exemplet deklarerade vi två variabler firstName och lastName och tilldelade personobjektets egenskaper till variablerna i samma uttalande.

det är möjligt att separera deklarationen och tilldelningen. Du måste dock omge variablerna inom parentes:

om du inte använder parenteserna kommer JavaScript-motorn att tolka vänster sida som ett block och kasta ett syntaxfel.

när du tilldelar en egenskap som inte finns till en variabel med hjälp av objektdestruktureringen, sätts variabeln till undefined. Till exempel:

Code language: JavaScript (javascript)

i det här exemplet finns inte egenskapen middleName i objektet person, därför är variabeln middleNameundefined.

ställa in standardvärden

du kan tilldela ett standardvärde till variabeln när egenskapen för ett objekt inte finns. Exempelvis:

Code language: JavaScript (javascript)

i det här exemplet tilldelade vi den tomma strängen till variabeln middleName när personobjektet inte har egenskapen middleName.

vi tilldelar också egenskapen currentAge till variabeln age med standardvärdet 18.

men när personobjektet har egenskapen middleName fungerar tilldelningen som vanligt:

Code language: JavaScript (javascript)

destruktion av ett null-objekt

en funktion kan returnera ett objekt eller null i vissa situationer. Till exempel:

Code language: JavaScript (javascript)

och du använder objektet destructuring tilldelning:

Code language: JavaScript (javascript)

koden kommer att kasta en TypeError:

Code language: JavaScript (javascript)

för att undvika detta kan du använda operatorn OR (||) för att återställa objektet null till ett tomt objekt:

Code language: JavaScript (javascript)

nu kommer inget fel att uppstå. Och firstName och lastName kommer att vara undefined.

kapslad objektdestruktion

förutsatt att du har ett employee objekt som har ett name objekt som egenskap:

Code language: JavaScript (javascript)

följande uttalande förstör egenskaperna för det kapslade name – objektet i enskilda variabler:

Code language: JavaScript (javascript)

det är möjligt att göra flera tilldelning av en egenskap till flera variabler:

Code language: JavaScript (javascript)

förstörande Funktionsargument

anta att du har en funktion som visar personobjektet:

Code language: JavaScript (javascript)

det är möjligt att förstöra objektargumentet som skickas in i funktionen så här:

Code language: JavaScript (javascript)

det ser mindre utförligt ut, särskilt när du använder många egenskaper hos argumentobjektet. Denna teknik används ofta i React.

sammanfattning

• Objektdestruktion tilldelar egenskaperna hos ett objekt till variabler med samma namn som standard.