hur man använder Object Destructuring i JavaScript

object destructuring är en användbar JavaScript-funktion för att extrahera egenskaper från objekt och binda dem till variabler.

vad är bättre, objektförstöring kan extrahera flera egenskaper i ett uttalande, kan komma åt egenskaper från kapslade objekt och kan ställa in ett standardvärde om egenskapen inte existerar.

i det här inlägget förklarar jag hur man använder objektförstöring i JavaScript.

1. Behovet av objektförstöring

Tänk dig att du vill extrahera vissa egenskaper hos ett objekt. I en pre-ES2015 miljö, skulle du behöva skriva följande kod:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

egenskapen hero.name värde tilldelas variabeln name. Samma sätt hero.realName värde tilldelas realName.

ett sådant sätt att komma åt egenskaper och tilldela dem till variabler kräver standardkod. Genom att skriva var name = hero.name måste du nämna name – bindningen 2 gånger, och samma för realName.

det är där objektförstöringssyntaxen är användbar: Du kan läsa en egenskap och tilldela dess värde till en variabel utan att duplicera egenskapsnamnet. Mer än så kan du läsa flera egenskaper från samma objekt i bara ett uttalande!

Låt oss refactor ovanstående skript och tillämpa objektet destructuring för att komma åt egenskaperna name och realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero är ett objekt destructuring uppdrag. Detta uttalande definierar variablerna name och realName och tilldelar dem sedan värdena för egenskaper hero.name och hero.realName motsvarande.

jämför de 2 metoderna för att komma åt objektegenskaperna:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

det är synligt att objektförstöringen är handier eftersom varken egenskapsnamnen eller Objektvariabeln dupliceras.

2. Extrahera en egenskap

den grundläggande syntaxen för objektförstöring är ganska enkel:

const { identifier } = expression;

där identifier är namnet på egenskapen att komma åt och expression ska utvärdera till ett objekt. Efter destruktionen innehåller variabeln identifier egenskapsvärdet.

här är motsvarande kod med hjälp av en egendom accessor:

const identifier = expression.identifier;

Låt oss försöka förstöra objektet i praktiken:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

uttalandet const { name } = hero definierar variabeln name och initierar den med värdet hero.name egenskap.

3. Extrahera flera egenskaper

för att förstöra objektet i flera egenskaper, räkna upp så många egenskaper som du vill lägga till kommatecken , däremellan:

const { identifier1, identifier2, ..., identifierN } = expression;

där identifier1,…, identifierN är namn på egenskaper att komma åt, och expression ska utvärdera till ett objekt. Efter destruktionen innehåller variablerna identifier1,…, identifierN motsvarande egenskapsvärden.

här är motsvarande kod:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

Låt oss ta en titt igen på exemplet från det första avsnittet, där 2 egenskaper extraheras:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero skapar 2 variabler name och realName tilldelade med värden för motsvarande egenskaper hero.nameoch hero.realName.

4. Standardvärden

om det destruerade objektet inte har egenskapen specificerad i destructuring-tilldelningen, tilldelas variabeln undefined. Låt oss se hur det händer:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

efter destruktion är variabeln enemies undefined eftersom egenskapen enemiesinte finns i objektet hero.

lyckligtvis kan du ställa in ett standardvärde om egenskapen inte finns i det förstörda objektet. Här är den grundläggande syntaxen:

const { identifier = defaultValue } = expression;

där identifier är namnet på egenskapen att komma åt och expression ska utvärdera till ett objekt. Efter destruktionen innehåller variabeln identifier egenskapsvärdet eller tilldelas med defaultValue om identifier – egenskapen inte existerar.

här är motsvarande kod:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

låt oss ändra det tidigare kodexemplet och använda standardvärdesfunktionen:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

nu, istället för att vara undefined, är variabeln enemies standard .

5. Alias

om du vill skapa variabler med andra namn än egenskaperna kan du använda aliasing-funktionen för objektförstöring.

const { identifier: aliasIdentifier } = expression;

identifier är namnet på egenskapen att komma åt, aliasIdentifier är variabelnamnet och expression ska utvärdera till ett objekt. Efter destruktionen innehåller variabeln aliasIdentifier egenskapsvärdet.

motsvarande kod:

const aliasIdentifier = expression.identifier;

här är ett exempel på objektförstörande aliasfunktion:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

om man tittar på const { realName: secretName } = hero definierar destucturing en ny variabel secretName(aliasvariabel) och tilldelar det värdet hero.realName.

6. Extrahera egenskaper från kapslade objekt

i de tidigare exemplen var objekten vanliga: egenskaperna har primitiva datatyper (t.ex. strängar).

ofta kan objekt kapslas i andra objekt. Med andra ord kan vissa egenskaper innehålla objekt.

i så fall kan du fortfarande använda objektförstörande och åtkomstegenskaper från deep. Här är den grundläggande syntaxen:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp är namnet på den egendom som har ett kapslat objekt. identifier är egenskapsnamnet för åtkomst från det kapslade objektet. expression bör utvärdera till det förstörda objektet.

efter destruktionen innehåller variabeln identifier egenskapsvärdet för det kapslade objektet.

ovanstående syntax motsvarar:

const identifier = expression.nestedObjectProp.identifier;

nestningsnivån du kan extrahera egenskaper från är obegränsad. Om du vill extrahera egenskaper från djup, lägg bara till fler kapslade lockiga hängslen:

const { propA: { propB: { propC: { .... } } } } = object;

till exempel innehåller objektet hero ett kapslat objekt { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

objektet destructuring const { address: { city } } = hero låter dig komma åt egenskapen city från det kapslade objektet.

7. Extrahera en egenskap för dynamiskt namn

du kan extrahera egenskaper för variabler med ett dynamiskt namn (egenskapsnamnet är känt vid körning):

const { : identifier } = expression;

propName uttrycket ska utvärderas till ett egenskapsnamn (vanligtvis en sträng) och identifier ska ange variabelnamnet som skapats efter destruktionen. Den andra expression ska utvärdera till objektet du vill förstöra.

en ekvivalent kod utan objektförstöring:

const identifier = expression;

Låt oss titta på ett exempel där prop har Egenskapens namn:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero är en objektdestruktion som tilldelar variabeln name värdet hero, där prop är en variabel som håller egenskapsnamnet.

8. Rest-objekt efter destruktion

rest-syntaxen är användbar för att samla de återstående egenskaperna efter destruktionen:

const { identifier, ...rest } = expression;

där identifier är namnet på egenskapen att komma åt och expression ska utvärdera till ett objekt.

efter destruktionen innehåller variabeln identifier egenskapsvärdet. rest variabel är ett vanligt objekt med de återstående egenskaperna.

låt oss till exempel extrahera egenskapen name, men behåll resten av egenskaperna:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

destructuring const { name, ...realHero } = heroextraherar egenskapen name.

samtidigt samlas de återstående egenskaperna (realName i detta fall) i variabeln realHero: { realName: 'Bruce Wayne' }.

9. Vanliga användningsfall

9.1 Bind egenskaper till variabler

som sett i många exempel tidigare binder objektförstöringen egenskapsvärden till variabler.

objektförstöringen kan tilldela värden till variabler som deklarerats med const, let och var. Eller till och med tilldela en redan befintlig variabel.

till exempel, så här förstör du med let uttalande:

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

hur man förstör med var uttalande:

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

och hur man förstör till en redan deklarerad variabel:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

jag tycker att det är tillfredsställande att kombinera for..of cykel med objektförstöring för att extrahera fastigheten direkt:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 funktionsparameter destructuring

generellt kan objekt destructuring placeras var som helst där en tilldelning sker.

du kan till exempel förstöra ett objekt direkt i parameterlistan för en funktion:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) förstör funktionsparametern och skapar en variabel name som håller värdet på egenskapen name.

10. Sammanfattning

objektförstöringen är en kraftfull funktion som låter dig extrahera egenskaper från ett objekt och binda dessa värden till variabler.

jag tycker särskilt om objektförstöring är den korta syntaxen och förmågan att extrahera flera variabler i ett uttalande.

förhoppningsvis har mitt inlägg hjälpt dig att se hur användbar objektförstöring är!