3 praktische Beispiele für die Verwendung der Destrukturierung in JavaScript

Schreiben eines Code Cleaner mithilfe von Destrukturierungsmustern

Sie sind wahrscheinlich bereits mit der Umstrukturierung in JavaScript vertraut. Es kam 2015 in der ES6-Spezifikation zu uns, aber wenn Sie Ihr Wissen auffrischen müssen, können Sie auf der Mozilla-Website einen ausführlichen Artikel darüber lesen, wie alles funktioniert .

Aber zu wissen, wie es funktioniert, ist keineswegs dasselbe wie zu wissen, wie man es benutzt. Hier sind drei Muster, mit denen Sie Ihren Code sauberer, zuverlässiger und leichter lesbar machen können!

1. Benannte Funktionsargumente

Benannte Argumente sind eine alternative Möglichkeit, Funktionsparameter zu Positionsargumenten zu verarbeiten. Anstatt Argumente in einer genau definierten Reihenfolge anzugeben, geben Sie einfach ihren Namen an. In Python sieht es beispielsweise so aus:

def sum(a=1,b=2,c=3): return a+b+c sum(b=5,a=10) 

Sehen Sie? Die Reihenfolge ist nicht wichtig, wenn Sie den Parameternamen explizit angegeben haben. Die Vorteile gegenüber Positionsargumenten sind:

1. Sie können beim Aufrufen einer Funktion einen oder mehrere Parameter weglassen
2. Die Reihenfolge der Übergabe der Argumente ist jetzt nicht mehr wichtig
3. Der Code ist lesbarer geworden

Obwohl nativ benannte Argumente in JavaScript nicht unterstützt werden, können wir das Destrukturierungsmuster verwenden, um alle drei oben genannten Vorteile zu erzielen. Dies ist das letzte Beispiel bereits in JavaScript:

 function sum({a = 1, b = 2, c = 3}) { return a + b + c } sum({b: 10, a: 5}) // 5 + 10 + 3 = 18 

Alle Ziele wurden erreicht: Sie können c weglassen, die Reihenfolge ist jetzt nicht mehr wichtig, und den Argumenten folgen ihre eigenen Namen. All dies ist gerade durch Destrukturierung möglich.

2. Sauberere Analyse der Serverantworten

In der Antwort des Servers interessiert uns häufig nur ein Datenblock oder nur ein bestimmter Wert aus diesem Block. Wenn dies der Fall ist, ignorieren Sie mithilfe der Destrukturierung alles andere, was der Server normalerweise sendet. Ein Beispiel:

 function mockServerCall () { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ 'status': 200, 'content-type': 'application/json', 'data' : { dataOfInterest: 42 } }) }, 250) }) } mockServerCall() .then(({data: { dataOfInterest = 100 }}) => { console.log(dataOfInterest) // 42 (    100) }) 

Mit diesem Muster können Sie die für uns interessanten Daten abrufen, während die Argumente analysiert werden. Und Sie haben die Möglichkeit, die Standardwerte als Bonus anzupassen. Was uns reibungslos zum nächsten Muster bringt ...

Festlegen von Standardwerten während der Zuweisung

Wenn eine Variable im Namespace nicht vorhanden ist, müssen wir sie häufig auf ihren Standardwert setzen.

Bevor die Destrukturierung kam, konnte man so etwas machen:

 //      var nightMode = userSettings.nightMode || false 

Für diesen Ansatz ist jedoch für jede Zuweisung eine Codezeile erforderlich. Durch die Destrukturierung können Sie alles auf einen Schlag erledigen:

 const userSettings = {nightMode: true, fontSize: 'large'} const { nightMode = false, language = 'en', fontSize = 'normal' } = userSettings console.log(nightMode) // true console.log(language) // 'en' console.log(fontSize) // 'large' 

Dieses Muster kann verwendet werden, um den Status von React! -Komponenten festzulegen.

Ich hoffe, diese Muster sind nützlich! Um mehr über Destrukturierung zu erfahren, folgen Sie den unten stehenden Links (Informationen in Englisch - ca. Übersetzung) :

ES6 Im Detail: Destrukturierung

Lernen Sie die Grundlagen der Destrukturierung von Requisiten in React