Modern JavaScript heeft veel nieuwe functies die het gemakkelijk maken om op een eenvoudige en gestructureerde manier code te schrijven. Een van de handige moderne functies die beschikbaar zijn in ES6+ is de destructurering van arrays en objecten.
JavaScript-frameworks zoals React.js en Angular moedigen het gebruik van deze techniek aan. Het is dus essentieel om te begrijpen wat destructuring inhoudt en hoe je het kunt gebruiken tijdens het schrijven van code.
Wat is object- en array-destructuring in JavaScript?
Destructuring in JavaScript verwijst naar het proces van het uitpakken van waarden uit een array of object. Het biedt een meer beknopte manier om waarden uit arrays of objecten te halen zonder zwaar werk wanneer u geïnteresseerd bent in individuele array-items of waarden in een object.
Het is ook handig bij het verwerken van geretourneerde waarden van een complexe functie of expressie. Dit concept is er een van
best practices die u moet volgen bij het schrijven van React-code.Hoe arrays te destructureren
Hier is een voorbeeldcode om een idee te krijgen van array-destructuring:
const arr = [1, 2];
const [a, b] = arr;
troosten.log (a) // print 1 op de console
troosten.log (b) // print 2 op de console
Deze code gebruikt destructurering om de waarden toe te wijzen van arr—1 en 2—naar de variabelen A En B, respectievelijk. Dit is het fundamentele concept achter destructurering. Je hebt een array of object aan de rechterkant en je pakt items uit en wijst ze toe aan individuele variabelen aan de linkerkant.
Onder de motorkap kopieert JavaScript waarden van arr en wijst ze als volgt toe aan de variabelen aan de linkerkant:
const arr = [1,2];
const een = arr[0];
const b = arr[1];
Zoals u kunt zien, is destructureren een meer beknopte manier om dit te doen, in tegenstelling tot het gebruik van de object- of haakjesnotatie. Deze syntaxis is echter waarschijnlijk handig bij het werken met complexe arrays of functies die arrays of strings retourneren.
Controleer de voorbeeldcode hieronder:
const [dag, maand, datum, jaar, tijd, tijdzone] = Datum().split(' ')
// Calling Date() retourneert de huidige datum in het formaat:
// ma 20 feb 2023 13:07:29 GMT+0000
troosten.log (dag) // drukt ma af
troosten.log (maand) // drukt feb
troosten.log (datum) // drukt 20 af
In dit codevoorbeeld maken we een nieuwe tekenreeks met de huidige datum door aan te roepen Datum(). Vervolgens gebruiken we splitsen(), A JavaScript-tekenreeksmethode, om items in de tekenreeks te scheiden met een spatie als scheidingsteken. splitsen(' ') geeft een array terug en we gebruiken destructuring om de waarden aan individuele variabelen toe te wijzen.
Onthoud dat als uw array meer items bevat dan u uitpakt, JavaScript de extra items negeert.
const arr = [1, 2, 3, 4];
const [a, b] = arr;
troosten.log (a) // afdrukken 1
troosten.log (b) // afdrukken 2
// waarden 3 en 4 worden aan geen enkele variabele toegewezen; ze worden genegeerd
Als u in dit geval de resterende items in een variabele wilt opslaan, gebruikt u een rustparameter zoals deze:
const arr = [1, 2, 3, 4];
const [a, b, ...rust] = arr;
troosten.log (rust) // afdrukken [3,4]
Soms geeft u misschien niet om een specifiek item. Met het destructureringspatroon van JavaScript kunt u ook bepaalde elementen overslaan door een lege komma te gebruiken.
const arr = [1, 2, 3, 4];
const [a,, c] = arr;
troosten.log (c) // afdrukken 3
De bovenstaande code gebruikt de lege ruimte om de waarde te negeren 2 in de reeks arr. In plaats van waarde toe te kennen 2 naar variabel C, springt het naar het volgende item in de array. Het negeert ook de vierde waarde omdat het geen variabele specificeert om het in op te slaan.
Als u daarentegen minder items nodig heeft dan u uitpakt, wijst het proces de ongedefinieerd waarde aan die extra variabelen.
const arr = [1];
const [a, b] = arr;
troosten.log (a) // afdrukken 1
troosten.log (b) // drukt ongedefinieerd af
Om te voorkomen dat variabelen ongedefinieerd zijn, kunt u als volgt standaardwaarden instellen als u niet zeker bent van de lengte van de array (het toewijzen van standaardwaarden is geen vereiste):
const arr = [1];
const [een = '10', b= 'niet voorzien'] = arr;
troosten.log (a) // afdrukken 1
troosten.log (b) // drukt "niet meegeleverd" af
Deze destructurering kent de waarde toe 1 naar variabel A, waarbij de standaardwaarde wordt overschreven. Variabel B behoudt zijn standaardwaarde omdat er geen waarde is opgegeven.
Hoe objecten te destructureren
Het destructureren van objecten verschilt niet zo veel van arrays. Het enige verschil is dat arrays itereerbaar zijn en objecten niet, wat resulteert in een iets andere manier om dingen te doen.
Bij het werken met objecten worden de variabelen aan de linkerkant van de toewijzingsoperator ook geïnitialiseerd als objecten:
const persoon = {naam: 'Alvin', leeftijd: 10, hoogte: 1};
const {naam, leeftijd, lengte} = persoon;
troosten.log (naam) // drukt 'Alvin' af
troosten.log (hoogte) // afdrukken 1
Uit de code gebruiken we eigenschapsnamen uit de persoon voorwerp. U hoeft echter niet de exacte eigenschapsnamen in het object te gebruiken. U kunt de waarden als volgt destructureren en opslaan in verschillende variabelenamen:
const persoon = {naam: 'Alvin', leeftijd: 10, hoogte: 1};
const {naam: Voornaam, leeftijd: jaar, hoogte: huidigeHoogte} = persoon;
troosten.log (voornaam) // drukt 'Alvin' af
troosten.log (currentHoogte) // afdrukken 1
U begint met het specificeren van de eigenschapswaarde die u wilt destructureren en specificeert vervolgens de variabelenaam die u gaat gebruiken om de waarde op te slaan na een dubbele punt. En net als arrays, zal het destructureren van een eigenschapsnaam die niet bestaat ongedefinieerd.
Om dit af te handelen, kunt u op dezelfde manier standaardwaarden opgeven voor het geval de eigenschapsnaam die u aan een variabele wilt toewijzen niet beschikbaar is:
const persoon = {naam: 'Alvin', leeftijd: 10, hoogte: 1};
const {naam, leeftijd, lengte, locatie='Wereldwijd'} = persoon;
troosten.log (naam) // drukt 'Alvin' af
troosten.log (locatie) // drukt 'Wereldwijd' af
De volgorde van variabelen aan de linkerkant doet er niet toe bij een object, aangezien de objecten waarden opslaan in sleutel-waardeparen. Als zodanig zal de volgende code dezelfde resultaten opleveren:
const persoon = {naam: 'Alvin', leeftijd: 10, hoogte: 1};
const {leeftijd, lengte, naam} = persoon;
troosten.log (naam) // drukt 'Alvin' af
troosten.log (hoogte) // afdrukken 1
Ten slotte kunt u, net als bij arrays, ook de parameter rest gebruiken om verschillende waarden in één variabele te destructureren, zoals:
const persoon = {naam: 'Alvin', leeftijd: 10, hoogte: 1};
const {naam, ...rust} = persoon;
troosten.log (naam) // drukt 'Alvin' af
troosten.log (rust) // afdrukken {leeftijd: 10, lengte: 1}
Houd er rekening mee dat de rustparameter altijd als laatste moet komen. Anders genereert JavaScript een uitzondering.
Verbeter uw codekwaliteit met de destructuring van JavaScript
De moderne functies van Javascript, zoals destructurering, stellen u in staat zeer leesbare code te schrijven. Met behulp van destructuring kunt u snel waarden uit arrays en objecten uitpakken. Destructureren kan ook handig zijn in andere situaties, zoals het verwisselen van waarden van twee variabelen. Hopelijk begrijp je nu wat destructuring betekent in JavaScript en kun je het gebruiken tijdens het schrijven van code.
