Mein neues Lieblings-ES6-Spielzeug: Destrukturierte Objekte als Parameter

Wie viele andere Entwickler arbeite ich an meiner Weiterbildung und lerne, was ich über ES6 kann. Eine Methode, dies zu tun, ist der Besuch von Workshops kluger Leute. Ich habe an Kyle Simpsons ES6: The Good Parts-Kurs teilgenommen und fand mich besonders an den praktischen Anwendungen eines Stücks ES6 interessiert, das mir zuvor nicht aufgefallen war: Destrukturierte Objekte als Parameter.

Einige Hintergründe

Wenn eine Anwendung wächst, können unsere Funktionsparameter aufgebläht werden. Dies ist aus einer Reihe von Gründen ein Problem

• Wir müssen uns die spezifische Reihenfolge dieser Parameter merken, wenn wir die Funktion aufrufen. Wenn es mehr als drei sind, erfordert es etwas Kontextwechsel, um sie zu vergleichen.
• Wir haben keine Standardwerte von Haus aus
• Um uns richtig selbst zu dokumentieren, verlassen wir uns stark auf die Benennung. Das Benennen von Argumenten in Code-Reviews macht so viel Spaß!

Wie lösen wir das mit ES6?

Wenn man sehr breit über die Übergabe von Objekten als Parameter nachdenkt, mag das auf den ersten Blick ziemlich einfach erscheinen und vielleicht sogar etwas umständlicher, da die Leute es nicht gewohnt sind, Parameter so zu lesen und auf diese Weise zu denken. Aber schauen Sie sich all die oben genannten Probleme an, die dies löst

• Sie müssen sich die spezifische Reihenfolge nicht mehr merken
• Wir können leicht optionale Parameter haben
• Wir können Standardwerte haben, was auch gut ist, weil es selbstdokumentierend ist
• Wir können Fallbacks für Fehlerbedingungen haben oder uns entscheiden, dies nicht zu tun, wenn wir einen Fehler anzeigen möchten

Destrukturierung kann uns helfen, Daten aus Arrays oder Objekten einfach in einzelne Variablen zu extrahieren und zu manipulieren und unsere Parameter aussagekräftiger zu machen. Dies hilft uns, unsere Absichten zukünftigen Lesern zu vermitteln und unterstützt die Wartung.

Was ist Destrukturierung?

Destrukturierte Objekte als Parameter kombinieren einige Dinge auf einmal. Beginnen wir mit dem Konzept der Destrukturierung als Ganzes, bevor wir diese spezielle Anwendung zeigen. Es gibt viele Verwendungszwecke und Anwendungen für die Destrukturierung, vielleicht am häufigsten angewendet, wenn Sie ein großes JSON-Objekt oder eine API haben und aussagekräftige Variablen daraus extrahieren möchten. Destrukturierung ist in ES5 möglich, aber aufgrund einer Kombination vieler Funktionen in ES6 ist die Destrukturierung viel besser lesbar und wertvoller.

Wir werden nur über die Destrukturierung von Objekten (nicht von Arrays) sprechen, aber es ist wichtig zu beachten, dass beides möglich ist. Wir beginnen mit einem sehr einfachen und knappen Vergleich der Objekt-Destrukturierung in ES5 vs. ES6

So destrukturieren wir ein Objekt in ES5

var o = {a: 1, b: 2, c: 3};
  
var chico = o.a,
    harpo = o.b,
    groucho = o.c;

console.log(chico, harpo, groucho);
// 1 2 3

Und nun sein ES6-Gegenstück

const o = {chico: 1, harpo: 2, groucho: 3};

const { chico, harpo, groucho } = o;

console.log(chico, harpo, groucho);
// 1 2 3

Dies hat einige wirklich nützliche praktische Anwendungen. Wir können Top-Level-Variablen aus Objekten erstellen, ein paar Eigenschaften auf einmal, und sie sogar extrahieren, wenn sie verschachtelt sind.

const o = {
  chico: 1, 
  harpo: 2, 
  groucho: 3,
  othermarx : {
    zeppo: 4,
    isthatamarxbrother: {
      gummo: 5,
      polly: 6
    }
  }
};

const { gummo, polly } = o.othermarx.isthatamarxbrother;

console.log(gummo, polly);

Wir können sie sogar umbenennen, indem wir etwas wie const { gummo, polly:cousin } = o.othermarx.isthatamarxbrother; tun.

Dieser Artikel wird nicht die gesamte Destrukturierung behandeln, damit wir uns auf eine praktische Anwendung konzentrieren können. Wenn Sie mehr darüber erfahren möchten, wie sie sich auf Arrays in ES6 anwendet und einige andere schöne Verwendungen, hier sind einige gute Ressourcen

• Github-Gist von Mikael Brevik
• Exploring JS

Wie verwenden wir das in einer Funktion?

Beginnen wir mit einem wirklich einfachen Beispiel einer Funktion mit einigen Parametern. Sagen wir, wir brauchen ein Manifest mit vielen Standardversanddaten. Diese Daten bleiben meistens gleich, weichen aber von Tag zu Tag ab. Standardwerte sind hier sehr sinnvoll, aber wir müssten etwas wie das hier schreiben

function shipmentES5Defaults(params) {
  params = params === undefined ? {} : params;
  var items = params.items === undefined ? 'bananas' : params.items;
  var number = params.number === undefined ? 5: params.number;
  var pkg = params.pkg === undefined ? 'crates' : params.pkg;
  console.log("We have a shipment of " + items + " in " + number + " " + pkg + ".");
}

shipmentES5Defaults();
// We have a shipment of bananas in 5 crates.

shipmentES5Defaults({
  items: 'cherries',
  pkg: 'bags'
});
// We have a shipment of cherries in 5 bags.

Das ist gut, denn wir haben unsere Standardwerte und geben nicht `undefined` zurück, wenn etwas nicht angegeben ist.

Aber in ES6 können wir das gerade behandelte destrukturierte Objekt als unsere Parameter verwenden, was uns eine schnelle und einfache Möglichkeit bietet, Standardwerte bereitzustellen. Abgesehen davon, dass es nützlich ist, ist es auch ein wenig selbstdokumentierend. Das ist ziemlich hilfreich und eine wirklich schöne Art, unsere Funktionen mit Blick auf Lesbarkeit zu schreiben. Ganz zu schweigen davon, dass das ES6-Template-Literal die Zeichenkette sowohl zum Lesen als auch zum Schreiben sehr einfach macht.

function shipmentES6({ items = 'bananas', number = 5, package = 'boxes' } = {}) {
  console.log(`We have a shipment of ${items} in ${number} ${package}.`);
};

shipmentES6({ package: 'crates' });
// -> We have a shipment of bananas in 5 crates.
shipmentES6({ items: 'tomatoes', number: 18 });
// -> We have a shipment of tomatoes in 18 boxes.
shipmentES6();
// -> We have a shipment of bananas in 5 boxes.

Abgesehen von all diesen Vorteilen, wenn Sie und Ihre Kollegen oder Mitarbeiter sich an diesen Schreibstil gewöhnen, dann, wenn Sie keinen Standardwert übergeben, kommunizieren Sie auch, dass es keine Standardwerte gibt und Sie lieber einen Fehler auslösen lassen.

Bleiben Sie dran für unseren nächsten Beitrag, in dem wir diese Art, Parameter zu schreiben, verwenden werden, um ein SVG-Diagramm ohne externe Bibliotheken zu erstellen.