Innovationen von Objektliteralen in JavaScript ES6

Das Material, dessen Übersetzung wir Ihnen vorstellen, widmet sich der Untersuchung der Merkmale von Objektliteralen in JavaScript, insbesondere der Innovationen, die in neueren Versionen des ECMAScript-Standards erschienen sind.

JavaScript bietet eine leistungsstarke und bequeme Möglichkeit, Objekte mithilfe von Objektliteralen zu erstellen. Der ES2015 (ES6) -Standard vereinfacht das Arbeiten mit Objekten beim Erstellen von Anwendungen für moderne Browser (außer IE) und für die Node.js-Plattform.

Die Grundlagen

Das Erstellen von Objekten in einigen Sprachen kann ressourcenintensiv sein. Damit meinen wir sowohl die Arbeitszeit des Programmierers als auch die Rechenressourcen der Systeme. Insbesondere geht es um die Tatsache, dass Sie vor dem Erstellen von Objekten die Klassen beschreiben müssen (z. B. mit dem Schlüsselwort class ). In JavaScript können Objekte sehr schnell und einfach erstellt werden, ohne dass vorbereitende Schritte erforderlich sind. Betrachten Sie ein Beispiel:

 // ES5 var myObject = { prop1: 'hello', prop2: 'world', output: function() {   console.log(this.prop1 + ' ' + this.prop2); } }; myObject.output(); // hello world 

Bei der Programmierung werden häufig "Einweg" -Objekte verwendet. Sie speichern Einstellungen und andere Daten, sie werden als Parameter von Funktionen, als von Funktionen zurückgegebene Werte und in anderen Situationen verwendet. In solchen Fällen erweisen sich JavaScript-Objektliterale als sehr nützlich, und ES6 erweitert ihre Funktionen.

Initialisierung von Objekten aus Variablen

Eigenschaften von Objekten werden häufig aus Variablen erstellt, indem ihnen dieselben Namen zugewiesen werden, die diesen Variablen bereits zugewiesen sind. Zum Beispiel:

 // ES5 var a = 1, b = 2, c = 3; obj = {   a: a,   b: b,   c: c }; // obj.a = 1, obj.b = 2, obj.c = 3 

In ES6 müssen Sie Variablennamen nicht mehr wiederholen:

 // ES6 const a = 1, b = 2, c = 3; obj = {   a,   b,   c }; // obj.a = 1, obj.b = 2, obj.c = 3 

Diese Technik kann für zurückgegebene Objekte nützlich sein, wenn Sie das Revealing Module- Muster verwenden, mit dem Sie Namespaces für verschiedene Codefragmente erstellen können, um Namenskonflikte zu vermeiden. Zum Beispiel:

 // ES6 const lib = (() => { function sum(a, b)  { return a + b; } function mult(a, b) { return a * b; } return {   sum,   mult }; }()); console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

Möglicherweise haben Sie gesehen, wie diese Technik in ES6-Modulen verwendet wird:

 // lib.js function sum(a, b)  { return a + b; } function mult(a, b) { return a * b; } export { sum, mult }; 

Kurzsyntax zum Deklarieren von Objektmethoden

Wenn Sie Objektmethoden in ES5 deklarieren, müssen Sie das function :

 // ES5 var lib = { sum:  function(a, b) { return a + b; }, mult: function(a, b) { return a * b; } }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

In ES6 können Sie dies jetzt nicht mehr tun. Die folgende Kurzform zur Deklaration von Methoden ist hier zulässig:

 // ES6 const lib = { sum(a, b)  { return a + b; }, mult(a, b) { return a * b; } }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

Es ist zu beachten, dass ES6-Pfeilfunktionen ( => ) hier nicht verwendet werden können, da Methoden Namen haben müssen. Pfeilfunktionen können jedoch verwendet werden, wenn Sie Methoden explizit Namen zuweisen (wie in ES5). Zum Beispiel:

 // ES6 const lib = { sum:  (a, b) => a + b, mult: (a, b) => a * b }; console.log( lib.sum(2, 3) );  // 5 console.log( lib.mult(2, 3) ); // 6 

Dynamische Tasten

In ES5 konnten Sie keine Variablen als Schlüsselnamen verwenden, obwohl der Schlüssel, dessen Name der Variablen zugewiesen wurde, nach dem Erstellen des Objekts hinzugefügt werden konnte. Zum Beispiel:

 // ES5 var key1 = 'one', obj = {   two: 2,   three: 3 }; obj[key1] = 1; // obj.one = 1, obj.two = 2, obj.three = 3 

In ES6 können Schlüssel dynamisch zugewiesen werden, indem ein Namensausdruck in eckige Klammern ( [] ) gesetzt wird. Zum Beispiel:

 // ES6 const key1 = 'one', obj = {   [key1]: 1,   two: 2,   three: 3 }; // obj.one = 1, obj.two = 2, obj.three = 3 

Um einen Schlüssel zu erstellen, können Sie einen beliebigen Ausdruck verwenden:

 // ES6 const i = 1, obj = {   ['i' + i]: i }; console.log(obj.i1); // 1 

Dynamische Schlüssel können sowohl für Methoden als auch für Eigenschaften verwendet werden:

 // ES6 const i = 2, obj = {   ['mult' + i]: x => x * i }; console.log( obj.mult2(5) ); // 10 

Eine andere Frage ist, ob Eigenschaften und Methoden mit dynamisch generierten Namen erstellt werden sollen. Die Lesbarkeit des Codes, der diese Technik verwendet, kann beeinträchtigt sein. Wenn Sie mit Situationen konfrontiert sind, in denen dynamische Namen angemessen erscheinen, ist es möglicherweise besser, über die Verwendung von Factory-Funktionen oder -Klassen zum Erstellen von Objekten nachzudenken.

Umstrukturierung

Destrukturierung ist die Extraktion von Eigenschaften von Objekten und deren Zuordnung zu Variablen. Während der Anwendungsentwicklung müssen Sie häufig den Wert einer Objekteigenschaft extrahieren und in eine Variable schreiben. In ES5 mussten Sie dies mithilfe der Eigenschaftszugriffsbefehle wie folgt beschreiben:

 // ES5 var myObject = { one:   'a', two:   'b', three: 'c' }; var one   = myObject.one, // 'a' two   = myObject.two, // 'b' three = myObject.three; // 'c' 

ES6 unterstützt die Destrukturierung. Sie können eine Variable mit demselben Namen erstellen, die die entsprechende Eigenschaft des Objekts trägt, und Folgendes tun:

 // ES6 const myObject = { one:   'a', two:   'b', three: 'c' }; const { one, two, three } = myObject; // one = 'a', two = 'b', three = 'c' 

Variablen, die Objekteigenschaftswerte erhalten, können tatsächlich beliebige Namen haben. Wenn sie sich jedoch von Eigenschaftsnamen unterscheiden, müssen Sie das { propertyName: newVariable } :

 // ES6 const myObject = { one:   'a', two:   'b', three: 'c' }; const { one: first, two: second, three: third } = myObject; // first = 'a', second = 'b', third = 'c' 

Objekte mit einer komplexen Struktur, in die Arrays und andere Objekte eingebettet sind, können auch für destruktive Zuweisungsoperationen verwendet werden:

 // ES6 const meta = { title: 'Enhanced Object Literals', pageinfo: {   url: 'https://www.sitepoint.com/',   description: 'How to use object literals in ES2015 (ES6).',   keywords: 'javascript, object, literal' } }; const { title   : doc, pageinfo: { keywords: topic } } = meta; /* doc   = 'Enhanced Object Literals' topic = 'javascript, object, literal' */ 

Auf den ersten Blick mag dies alles kompliziert erscheinen, es ist jedoch nicht so schwer, es herauszufinden. Die Hauptsache ist, sich an Folgendes zu erinnern:

• Die rechte Seite des Ausdrucks ist die Datenquelle - ein Array oder Objekt, in dem die abzurufenden Daten gespeichert sind.
• Die linke Seite des Ausdrucks ist das Ziel der destruktiven Zuweisung - eine Struktur, die die Variablen beschreibt, denen die aus dem Array oder Objekt extrahierten Werte zugewiesen werden.

Bei der Verwendung der Destrukturierung können einige Schwierigkeiten auftreten. Ein Ausdruck kann also nicht mit einer geschweiften Klammer gestartet werden, da er dann wie ein Codeblock aussieht. Zum Beispiel:

 { a, b, c } = myObject; //  

Dieses Design wird normalerweise vom System bei der Deklaration von Variablen wahrgenommen:

 const { a, b, c } = myObject; //  

Wenn die Variablen bereits deklariert sind, müssen Sie den Ausdruck in Klammern setzen:

 let a, b, c; ({ a, b, c } = myObject); //  

Daher sollten Sie beim Umgang mit Destrukturierung vorsichtig mit dem Code sein und keine deklarierten und nicht deklarierten Variablen mischen.

Destrukturierung ist eine Technik, die in vielen Situationen nützlich sein kann.

Standardfunktionsparameter

Wenn eine Funktion eine lange Liste von Argumenten benötigt, ist es normalerweise einfacher, ihr ein einzelnes Objekt mit Parametern zu übergeben. Zum Beispiel:

 prettyPrint( { title: 'Enhanced Object Literals', publisher: {   name: 'SitePoint',   url: 'https://www.sitepoint.com/' } } ); 

In ES5 mussten Objekte mit Parametern analysiert werden, um den entsprechenden Parametern Standardwerte zuzuweisen, wenn diese Objekte nicht das haben, was sie benötigen:

 // ES5,     function prettyPrint(param) { param = param || {}; var   pubTitle = param.title || 'No title',   pubName = (param.publisher && param.publisher.name) || 'No publisher'; return pubTitle + ', ' + pubName; } 

In ES6 können allen Parametern Standardwerte zugewiesen werden:

 // ES6 -     function prettyPrint(param = {}) { ... } 

Anschließend können Sie mithilfe der Destrukturierung Werte aus dem Objekt extrahieren und gegebenenfalls Standardwerte zuweisen:

 // ES6     function prettyPrint( {   title: pubTitle = 'No title',   publisher: { name: pubName = 'No publisher' } } = {} ) { return `${pubTitle}, ${pubName}`; } 

Es ist erwähnenswert, dass ein solcher Code möglicherweise schwieriger zu lesen ist als herkömmlicher, obwohl dies eine Frage der persönlichen Vorlieben des Programmierers ist.

Analysieren von Objekten, die von Funktionen zurückgegeben werden

Funktionen können nur einen Wert zurückgeben, aber dieser Wert kann ein Objekt mit Hunderten von Eigenschaften oder Methoden sein. In ES5 mussten Sie zuerst das zurückgegebene Objekt abrufen, und danach konnten Sie die Werte daraus extrahieren:

 // ES5 var obj = getObject(), one = obj.one, two = obj.two, three = obj.three; 

Die Umstrukturierung vereinfacht diesen Prozess. Jetzt können Sie dies alles tun, ohne das Objekt in einer separaten Variablen speichern und dann analysieren zu müssen:

 // ES6 const { one, two, three } = getObject(); 

Möglicherweise haben Sie in Node.js etwas Ähnliches gesehen. Wenn Sie beispielsweise nur die readFile() und writeFile() des Moduls fs benötigen, können Sie folgende Links zu diesen erhalten:

 // ES6 Node.js const { readFile, writeFile } = require('fs'); readFile('file.txt', (err, data) => { console.log(err || data); }); writeFile('new.txt', 'new content', err => { console.log(err || 'file written'); }); 

Verbleibende Parametersyntax und Erweiterungsoperator ES2018 (ES9)

= In ES2015 wurden die Syntax der verbleibenden Parameter und der Erweiterungsoperator (beide sehen aus wie drei Punkte, … ) nur bei der Arbeit mit Arrays verwendet. In ES2018 können ähnliche Funktionen zum Arbeiten mit Objekten verwendet werden:

 const myObject = { a: 1, b: 2, c: 3 }; const { a, ...x } = myObject; // a = 1 // x = { b: 2, c: 3 } 

Ein ähnlicher Ansatz kann verwendet werden, um bestimmte Werte an eine Funktion zu übertragen:

 function restParam({ a, ...x }) { // a = 1 // x = { b: 2, c: 3 } } restParam({ a: 1, b: 2, c: 3 }); 

Bitte beachten Sie, dass Sie in solchen Situationen nur einen Ausdruck mit drei Punkten am Ende der Liste verwenden können. Darüber hinaus funktioniert dies bei Objekten, die in anderen Objekten verschachtelt sind, nicht.

Der Erweiterungsoperator kann in Objekten verwendet werden:

 const obj1 = { a: 1, b: 2, c: 3 }, obj2 = { ...obj1, z: 26 }; // obj2 is { a: 1, b: 2, c: 3, z: 26 } 

Der Erweiterungsoperator kann zum Klonen von Objekten verwendet werden ( obj2 = { ...obj1 }; ). Hierbei ist jedoch zu berücksichtigen, dass bei diesem Ansatz eine flache Kopie des Objekts ausgeführt wird. Wenn die Eigenschaften der Objekte andere Objekte sind, verweist der Klon des Objekts auf dieselben verschachtelten Objekte.

Die Syntax der verbleibenden Parameter und der Erweiterungsoperator werden noch nicht allgemein unterstützt. Derzeit können sie ohne zusätzlichen Aufwand in Chrome- und Firefox-Browsern sowie bei der Entwicklung für die Node.js-Plattform Version 8.6 und höher verwendet werden.

Zusammenfassung

Objektliterale waren schon immer eine nützliche JavaScript-Funktion. Die Innovationen, die seit dem ES2015-Standard in JavaScript erscheinen, bringen keine grundlegenden Änderungen mit sich, sparen dem Programmierer jedoch Zeit und helfen, saubereren und präziseren Code zu schreiben.

Liebe Leser! Welche Methoden zum Erstellen von JS-Objekten verwenden Sie am häufigsten?