Javascript-Objektliteral: Was genau ist {a, b, c}?

Die Frage, die ich habe, wird am besten über diese jsfiddle gestellt , deren Code unten steht:

var a = 1, b = 'x', c = true;

var d = {a: a, b: b, c: c}; // <--- object literal
var e = [a, b, c];          // <--- array
var f = {a, b, c};          // <--- what exactly is this??

// these all give the same output:
alert(d.a  + ', ' + d.b +  ', ' + d.c );
alert(e[0] + ', ' + e[1] + ', ' + e[2]);
alert(f.a  + ', ' + f.b +  ', ' + f.c );

Was ist eine Datenstruktur f? Ist es nur eine Abkürzung für d?

javascript ecmascript-6 drmrbrewer
quelle

Der erste ist eigentlich nicht JSON.

GolezTrol

Das ist nicht die einzige Abkürzung, es gibt noch ein paar mehr in ES6

Kos

OK @GolezTrol, es ist nicht ausschließlich JSON, da die Schlüssel nicht in doppelten Anführungszeichen stehen. Wie genau würden Sie die dDatenstruktur in meinem Beitrag nennen?

drmrbrewer

Es ist wichtig zu verstehen, dass keine der Versionen gültiges JSON ist. Die Art und Weise, die Daten als JSON-Zeichenfolge darzustellen, wäre{"a" : 1, "b" : "x", "c" : true }

Benjamin Gruenbaum

@drmrbrewer Es ist ein Objektliteral . Es ist kein JSON, da es sich um Javascript-Code handelt , während JSON ein Serialisierungsformat ist. Zum Beispiel var a = '{ "a" : "value"}'-> aenthält eine Zeichenfolge, die über über ein Objekt deserialisiert werden kann JSON.parse.

Moonwave99

Antworten:

Es ist eine Kurzform der Objektinitialisierer- Eigenschaft in ES6.

var f = {a, b, c, d:1}; // Will be equal to {a:a, b:b, c:c, d:1}

Dies funktioniert, weil der Eigenschaftswert denselben Namen wie die Eigenschaftskennung hat. Dies ist eine neue Ergänzung der Syntax von Object Initialiser ( Abschnitt 11.1.5 ) im neuesten ECMAScript 6-Entwurf Rev. 13 . Und genau wie die in ECMAScript 3 festgelegten Einschränkungen können Sie natürlich kein reserviertes Wort als Eigenschaftsnamen verwenden.

Eine solche Abkürzung ändert Ihren Code nicht dramatisch, sondern macht alles nur ein bisschen süßer!

function createCar(name, brand, speed) {
  return { type: 'Car', name: name, brand: brand, speed: speed };
}

// With the new shorthand form
function createSweetCar(name, brand, speed) {
  return { type: 'Car', name, brand, speed }; // Yes it looks sweet.
}

Informationen zur Unterstützung dieser Notationen finden Sie in der Kompatibilitätstabelle. In nicht unterstützenden Umgebungen führen diese Notationen zu Syntaxfehlern.

Diese Kurzschreibweise bietet eine recht gute Objektübereinstimmung:

In ECMAScript5 haben wir Folgendes getan:

var tmp = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

Kann in ECMAScript6 mit einer einzigen Codezeile ausgeführt werden:

var { op, lhs, rhs } = getData();

Leere
quelle

Warum sollte dies so nützlich sein, um ein Sprachfeature zu werden? Es scheint viel üblicher zu sein, dass Benutzer das Objekt entweder direkt mit Literalen, Rückgabewerten usw. initialisieren oder das Objekt zuerst erstellen und dann die Eigenschaften direkt festlegen. Das Erstellen von Variablen mit denselben Namen, das Instanziieren und das endgültige Initialisieren des Objekts auf diese Weise erscheint nur ungewöhnlich ... oder doch?

Panzercrisis

@Panzercrisis Es scheint, als würde es persönlich zu vielen unbeabsichtigten und schwer zu findenden Fehlern führen. Ähnlich wie beim Zulassen einer if(a = 1) {...}gültigen Syntax.

Anthony Grist

@Panzercrisis Ich denke, es ist zumindest sinnvoll, wenn Sie sich vorstellen, dass a, b und c komplexere Datenstrukturen sind und f auch andere komplexe Eigenschaften enthält. Ich bin mir immer noch nicht sicher, ob es eine großartige Idee ist, aber ich konnte sehen, dass dies nützlich ist.

Josh Rumbut

@Panzercrisis Es kann sehr nützlich sein, ein Tupel von einer Lambda-Funktion zurückzugeben, so etwas wie (a, b) => {a, b}. Zumindest habe ich so die gleiche Funktion verwendet C#.

Vincent van der Weele

@ Alex wie ist das eine "Eigenart" oder "komplex"? Eine sehr häufige Sache, die Sie normalerweise in vielen Codebasen finden, ist das Initialisieren eines Objekts, bei dem der Schlüssel mit der als Wert angegebenen Variablen {id: id, data: data, isSelected: isSelected}usw. übereinstimmt . Dies geschieht häufig, wenn Objekte, die in lokale Objekte eingehen, und dann zurück zugeordnet werden. In den meisten Fällen möchten Sie Ihre Inhalte nicht etwas anders benennen {identifier: id, viewData: data, isElementSelected: isSelected }, wenn Sie genau über "schrullig", "komplex" und "verwirrend" sprechen.

VLAZ

var f = {a, b, c};

Es wurde mit ES6 (ECMAScript 2015) geliefert und bedeutet genau das Gleiche wie:

var f = {a: a, b: b, c: c};

Es wird als Object Literal Property Value Shorthands (oder einfach als Property Value Shorthand, Shorthand Properties) bezeichnet.

Sie können auch Kurzschriften mit klassischer Initialisierung kombinieren:

var f = {a: 1, b, c};

Weitere Informationen finden Sie unter Objektinitialisierer .

madox2
quelle

var f = {a, b, c};          // <--- what exactly is this??

Es definiert ein Objekt in JavaScript mit der neuen ECMAScript 2015-Notation:

Gemäß Mozilla Developer Network :

"Objekte können mit new Object (), Object.create () oder mit der Literalnotation (Initialisierungsnotation) initialisiert werden. Ein Objektinitialisierer ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und zugehörigen Werten eines Objekts, die in eingeschlossen sind Geschweifte Klammern ({})."

var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

ist äquivalent zu:

var a = "foo", 
    b = 42,
    c = {};

var o = { 
  a: a,
  b: b,
  c: c
};

MojoJojo
quelle