3 Praktisch gebruik van objectvernietiging in JavaScript

Schrijf schonere code met behulp van deze vernietigende patronen

Inmiddels ben je waarschijnlijk behoorlijk bekend met het vernietigen van JavaScript! Het kwam in 2015 bij ons in de ES6-specificatie, maar als je het wilt opfrissen, heeft Mozilla een uitgebreid artikel over hoe het werkt.

Weten hoe destructurering werkt, is echter niet hetzelfde als weten hoe het te gebruiken. Hier zijn drie destructureringspatronen die u kunt gebruiken om uw code schoner, robuuster en leesbaarder te maken!

1. Benoemde functieargumenten

Genoemde argumenten zijn een alternatieve manier om functieparameters te behandelen in plaats van per positie. In plaats van uw argumenten in dezelfde volgorde te rangschikken als de functiehandtekening, geeft u het argument eenvoudig op naam op. In Python bijvoorbeeld:

Zoals u ziet, doet de volgorde van de argumenten er niet toe - u geeft ze gewoon op bij naam. De voordelen van genoemde argumenten versus positionele zijn:

  1. U kunt een of meer parameters weglaten wanneer u de functie aanroept
  2. De volgorde doet er niet toe bij het doorgeven van argumenten.
  3. Meer leesbare code bij het aanroepen van een functie die elders zou kunnen bestaan

Hoewel echte benoemde argumenten niet bestaan ​​in JavaScript, kunnen we een destructief patroon gebruiken om alle 3 dezelfde voordelen te bereiken. Hier is dezelfde code als hierboven, maar dan in JavaScript:

Dit patroon raakt al onze doelen voor genoemde argumenten. We konden het argument c weglaten, de volgorde doet er niet toe en we wijzen ons argument toe door ernaar te verwijzen bij naam. Dit wordt allemaal mogelijk gemaakt door objectvernietiging.

2. Parseer een serverreactie netjes

Vaak geven we alleen om het gegevensblok of zelfs één specifieke waarde in het gegevensblok van een serverreactie. Als dat het geval is, kunt u destructurering gebruiken om alleen die waarde te pakken terwijl u veel andere dingen negeert die een server meestal terugstuurt. Hier is een voorbeeld:

Met dit patroon kunt u waarden uit een object halen terwijl uw argumenten worden ontleed. Je kunt ook gratis standaardinstellingen instellen! Dat brengt ons bij het derde patroon ...

3. Standaardwaarden instellen tijdens toewijzing

Een veel voorkomend geval bij het toewijzen van variabelen of constanten is om een ​​standaardwaarde te hebben als er momenteel geen andere waarde in het bereik bestaat.

Voorafgaand aan destructurering, zou je zoiets kunnen doen om dat gewenste gedrag te bereiken:

// oude manier om standaardwaarden in te stellen
var nightMode = userSettings.nightMode || vals

Maar dit vereist een afzonderlijke coderegel voor elke opdracht. Met destructurering kun je al je opdrachten en hun standaardinstellingen in één keer afhandelen:

Dit destructureringspatroon kan worden toegepast om de status van uw React-componenten in te stellen!

Ik hoop dat je sommige van deze patronen op je code kunt toepassen! Bekijk de onderstaande links voor meer informatie over destructurering.

Leer meer!