JavaScript – Objectdestructie

samenvatting: in deze tutorial leert u over de JavaScript-objectdestructie die eigenschappen van een object toewijst aan individuele variabelen.

als u wilt leren hoe u een array kunt vernietigen, kunt u de handleiding voor het vernietigen van array bekijken.

Inleiding tot de JavaScript objectdestructuring opdracht

stel dat u een person object hebt met twee eigenschappen: firstName en lastName.

Code language: JavaScript (javascript)

voorafgaand aan ES6, wanneer u Eigenschappen van het person object wilt toewijzen aan variabelen, doet u dit meestal als volgt:

Code language: JavaScript (javascript)

ES6 introduceert de syntaxis voor het vernietigen van objecten die een alternatieve manier biedt om eigenschappen van een object aan variabelen toe te wijzen:

Code language: JavaScript (javascript)

in dit voorbeeld worden de eigenschappen firstName en lastName toegewezen aan respectievelijk de variabelen fName en lName.

in deze syntaxis:

Code language: JavaScript (javascript)

de identifier voor de dubbele punt (:) is de eigenschap van het object en de identifier na de dubbele punt is de variabele.

merk op dat de eigenschapsnaam altijd links staat, of het nu een letterlijke of een destructieve syntaxis van een object is.

als de variabelen dezelfde namen hebben als de eigenschappen van het object, kunt u de code als volgt beknopter maken:

Code language: JavaScript (javascript)

In dit voorbeeld hebben we twee variabelen firstName en lastName gedeclareerd, en de eigenschappen van het persoonsobject toegewezen aan de variabelen in hetzelfde statement.

het is mogelijk de declaratie en de toewijzing te scheiden. U moet de variabelen echter tussen haakjes omringen:

als u de haakjes niet gebruikt, zal de JavaScript-engine de linkerkant interpreteren als een blok en een syntaxfout geven.

wanneer u een eigenschap toewijst die niet bestaat aan een variabele met behulp van de objectdestructuring, wordt de variabele ingesteld op undefined. Bijvoorbeeld::

Code language: JavaScript (javascript)

In dit voorbeeld bestaat de eigenschap middleName niet in het object person, daarom is de variabele middleName undefined.

Standaardwaarden instellen

u kunt een standaardwaarde toewijzen aan de variabele wanneer de eigenschap van een object niet bestaat. Bijvoorbeeld:

Code language: JavaScript (javascript)

in dit voorbeeld hebben we de lege tekenreeks toegewezen aan de variabele middleName wanneer het object persoon de eigenschap middleName niet heeft.

ook wijzen we de eigenschap currentAge toe aan de variabele age met de standaardwaarde van 18.

echter, wanneer het persoonsobject de eigenschap middleName heeft, werkt de toewijzing zoals gewoonlijk:

Code language: JavaScript (javascript)

het vernietigen van een null object

een functie kan in sommige situaties een object of null retourneren. Bijvoorbeeld::

Code language: JavaScript (javascript)

en je gebruikt de opdracht voor het vernietigen van objecten:

Code language: JavaScript (javascript)

de code zal een TypeError:

Code language: JavaScript (javascript)

om dit te voorkomen kunt u de operator OR (||) gebruiken om het null object terug te trekken naar een leeg object:

Code language: JavaScript (javascript)

er zal geen fout optreden. En de firstName en lastName worden undefined.

geneste objectdestructie

aangenomen dat u een employee object heeft dat een name object als eigenschap heeft:

Code language: JavaScript (javascript)

het volgende statement vernietigt de eigenschappen van het geneste name object in individuele variabelen:

Code language: JavaScript (javascript)

Het is mogelijk om meerdere opdracht van een woning naar meerdere variabelen:

Code language: JavaScript (javascript)

Destructuring argumenten van functie

Stel je hebt een functie waarin de persoon object:

Code language: JavaScript (javascript)

Het is mogelijk om destructure het object argument is doorgegeven aan de functie zoals deze:

Code language: JavaScript (javascript)

Het ziet er minder uitgebreide vooral wanneer u veel eigenschappen van het argument object. Deze techniek wordt vaak gebruikt in React.

samenvatting

• objectdestructuring wijst de eigenschappen van een object standaard toe aan variabelen met dezelfde namen.