hoe te gebruiken Objectdestructuring in JavaScript

de objectdestructuring is een handige JavaScript-functie om eigenschappen uit objecten te extraheren en ze aan variabelen te binden.

Wat is beter, objectdestructuring kan meerdere eigenschappen extraheren in één statement, kan eigenschappen benaderen vanuit geneste objecten, en kan een standaardwaarde instellen als de eigenschap niet bestaat.

in dit bericht zal ik uitleggen hoe objectdestructuring te gebruiken in JavaScript.

1. De noodzaak voor objectdestructie

stel je voor dat je enkele eigenschappen van een object wilt extraheren. In een pre-ES2015 omgeving moet u de volgende code schrijven:

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

de waarde eigenschap hero.name wordt toegewezen aan de variabele name. Dezelfde manier waarop de waarde hero.realName wordt toegewezen aan realName.

een dergelijke manier om eigenschappen te benaderen en toe te wijzen aan variabelen vereist boilerplate code. Door var name = hero.name te schrijven, moet u de name binding 2 keer vermelden, en hetzelfde voor realName.

hier is de syntaxis voor het vernietigen van objecten nuttig: u kunt een eigenschap lezen en de waarde ervan toewijzen aan een variabele zonder de eigenschapsnaam te dupliceren. Meer dan dat, kunt u meerdere eigenschappen van hetzelfde object lezen in slechts één statement!

laten we het bovenstaande script herzien en de objectdestructuring toepassen om toegang te krijgen tot de eigenschappen name en realName:

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

const { name, realName } = hero is een object vernietigende opdracht. Dit statement definieert de variabelen name en realName, en wijst ze vervolgens de waarden van eigenschappen hero.name en hero.realName toe.

het vergelijken van de 2 benaderingen om toegang te krijgen tot de objecteigenschappen:

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

het is zichtbaar dat het vernietigen van objecten handiger is omdat noch de eigenschapsnamen, noch de objectvariabele worden gedupliceerd.

2. Uitpakken van een eigenschap

de basissyntaxis van objectdestructie is vrij eenvoudig:

const { identifier } = expression;

waarbij identifier de naam is van de eigenschap waartoe toegang moet worden verkregen en expression een object moet evalueren. Na de vernietiging bevat de variabele identifier de eigenschapswaarde.

hier is de equivalente code met behulp van een eigenschap accessor:

const identifier = expression.identifier;

laten we het vernietigen van het object in de praktijk proberen:

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

het statement const { name } = hero definieert de variabele name en initialiseert deze met de waarde van de eigenschap hero.name.

3. Extraheren van meerdere eigenschappen

om het object te vernietigen in meerdere eigenschappen, Som zoveel eigenschappen op als u wilt door komma ‘ s , tussendoor toe te voegen:

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

waarbij identifier1,…, identifierN namen zijn van eigenschappen om toegang te krijgen, en expression moet evalueren voor een object. Na de vernietiging bevatten de variabelen identifier1,…, identifierN overeenkomstige eigenschappen.

hier is de equivalente code:

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

laten we nog eens kijken naar het voorbeeld uit de eerste sectie, waar 2 eigenschappen worden geëxtraheerd:

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

const { name, realName } = hero maakt 2 variabelen name en realName aan met waarden van overeenkomstige eigenschappen hero.name en hero.realName.

4. Standaardwaarden

als het vernietigde object niet de eigenschap heeft die is opgegeven in de destructietoewijzing, dan wordt de variabele toegewezen met undefined. Laten we eens kijken hoe het gebeurt.:

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

na het vernietigen is de variabele enemies undefined omdat de eigenschap enemies niet bestaat in het object hero.

gelukkig kunt u een standaardwaarde instellen als de eigenschap niet bestaat in het vernietigde object. Hier is de basis syntaxis:

const { identifier = defaultValue } = expression;

waarbij identifier de naam is van de eigenschap waartoe toegang moet worden verkregen en expression een object moet evalueren. Na de vernietiging bevat de variabele identifier de eigenschapswaarde of wordt defaultValue toegewezen als de eigenschap identifier niet bestaat.

hier is de equivalente code:

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

laten we het vorige codevoorbeeld wijzigen en de standaardwaarde gebruiken functie:

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

in plaats van undefined is de variabele enemies standaard .

5. Aliassen

als u variabelen wilt maken met andere namen dan de eigenschappen, dan kunt u de aliasfunctie van objectdestructuring gebruiken.

const { identifier: aliasIdentifier } = expression;

identifier is de naam van de eigenschap die moet worden benaderd, aliasIdentifier is de naam van de variabele, en expression moet evalueren voor een object. Na de vernietiging bevat de variabele aliasIdentifier de eigenschapswaarde.

de equivalente code:

const aliasIdentifier = expression.identifier;

hier is een voorbeeld van object destructuring alias feature:

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

kijkend naar const { realName: secretName } = hero, definieert de destucturing een nieuwe variabele secretName (alias variabele), en kent deze de waarde hero.realNametoe.

6. Extraheren van eigenschappen uit geneste objecten

in de vorige voorbeelden waren de objecten gewoon: de eigenschappen hebben primitieve gegevenstypen (bijvoorbeeld strings).

vaak kunnen objecten in andere objecten worden genest. Met andere woorden, sommige eigenschappen kunnen objecten bevatten.

in dat geval kunt u nog steeds de objectdestructuring en access-eigenschappen van deep gebruiken. Hier is de basis syntaxis:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp is de naam van de eigenschap die een genest object bevat. identifier is de eigenschappennaam die toegang geeft tot het geneste object. expression moet evalueren tot het vernietigde object.

na de vernietiging bevat de variabele identifier de eigenschapswaarde van het geneste object.

de bovenstaande syntaxis is gelijk aan:

const identifier = expression.nestedObjectProp.identifier;

het niveau van nesting waar u Eigenschappen uit kunt extraheren is onbeperkt. Als u Eigenschappen uit deep wilt extraheren, voegt u gewoon meer geneste krullende beugels toe:

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

het object hero bevat bijvoorbeeld een genest object { city: 'Gotham'}.

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

de objectdestructuring const { address: { city } } = hero laat je de eigenschap city benaderen vanuit het geneste object.

7. Uitpakken van een eigenschap dynamische naam

u kunt eigenschappen met een dynamische naam extraheren naar variabelen (de naam van de eigenschap is bekend tijdens runtime):

const { : identifier } = expression;

propName expressie moet evalueren naar een eigenschapsnaam (meestal een string), en identifier moet de naam van de variabele aangeven die na de vernietiging is gemaakt. De tweede expression moet evalueren naar het object dat u wilt vernietigen.

een equivalente code zonder vernietiging van objecten:

const identifier = expression;

laten we eens kijken naar een voorbeeld waar prop de eigenschapsnaam bevat:

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

const { : name } = hero is een objectvernietiging die aan variabele name de waarde hero toewijst, waarbij prop een variabele is met de eigenschapsnaam.

8. Rest object na de vernietiging

de rest syntaxis is nuttig om de resterende eigenschappen na de vernietiging te verzamelen:

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

waarbij identifier de naam is van de eigenschap waartoe toegang moet worden verkregen en expression een object moet evalueren.

na de vernietiging bevat de variabele identifier de eigenschapswaarde. rest variabele is een normaal object met de overige eigenschappen.

bijvoorbeeld, laten we de eigenschap name extraheren, maar de rest van de eigenschappen behouden:

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

de vernietiging const { name, ...realHero } = hero haalt de eigenschap nameuit.

tegelijkertijd worden de resterende eigenschappen (realName in dit geval) verzameld in de variabele realHero: { realName: 'Bruce Wayne' }.

9. Veelvoorkomende use cases

9.1 Bind eigenschappen aan variabelen

zoals te zien is in veel voorbeelden hiervoor, bindt de objectdestructuring eigenschappen aan variabelen.

de objectvernietiging kan waarden toewijzen aan variabelen die zijn gedeclareerd met const, let en var. Of zelfs toewijzen aan een reeds bestaande variabele.

bijvoorbeeld, hier is hoe te vernietigen met behulp van let statement:

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

Hoe destructure met behulp van var statement:

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

En hoe destructure aan een reeds gedeclareerde variabele:

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

ik vind het bevredigend om te combineren for..of cyclus met object destructuring uitpakken van de goederen meteen:

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

9.2 Functie-parameter destructuring

in het Algemeen, het object destructuring kan overal geplaatst worden waar een opdracht gebeurt.

bijvoorbeeld, u kunt een object vernietigen binnen de lijst parameters van een functie:

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

function({ name }) vernietigt de functieparameter, waarbij een variabele name wordt aangemaakt die de waarde van de eigenschap name bevat.

10. Samenvatting

de objectdestructie is een krachtige functie waarmee u Eigenschappen uit een object kunt extraheren en deze waarden kunt binden aan variabelen.

ik hou vooral van objectdestructuring is de beknopte syntaxis en de mogelijkheid om meerdere variabelen in één statement te extraheren.

Hopelijk heeft mijn bericht je geholpen om te zien hoe nuttig het vernietigen van objecten is!