Javascript Objekt Literal: Was genau ist {a, b, c}? unter

Question

Die Frage, die ich am besten haben haft this jsfiddle gegeben ist, ist der Code für die gilt:

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 für eine Datenstruktur ist f? Ist es nur eine Kurzschrift für d?

Answer 1

var f = {a, b, c}; 

Es kam mit ES6 (ECMAScript 2015) und bedeutet genau das gleiche wie:

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

Es Objektliteral Eigenschaft Wert Shorthands (oder einfach Eigenschaftswert Stenografie, Stenographie Eigenschaften) genannt wird.

Sie können auch Kürzel mit klassischen Initialisierung kombinieren:

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

Weitere Informationen Object initializer sehen.

Answer 2

Es ist ein Objektinitialisierer Property Shorthand 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 zur Syntax Object Initialiser (section 11.1.5) in der neuesten ECMAScript 6 draft Rev 13. Und genau wie die Einschränkungen, die in ECMAScript 3 festgelegt wurden, können Sie ein reserviertes Wort nicht als Ihren Eigenschaftsnamen verwenden.

Eine solche Kurzschrift ändert Ihren Code nicht dramatisch, sondern macht alles nur noch 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. 
} 

Bitte beachten Sie die Kompatibilitätstabelle für diese Bezeichnungen für die Unterstützung. In nicht unterstützenden Umgebungen führen diese Notationen zu Syntaxfehlern.

Diese Kurzschreibweise bietet Objekt passende recht schön:

In ECMAScript5, was wir zu tun pflegten:

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

Kann in ECMAScript6 mit einer einzigen Codezeile erfolgen:

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

Answer 3

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

Es ein Objekt in JavaScript definiert die neue ECMAScript 2015 Notation:

Per Mozilla Developer Network:

„Objekte mit new Object(), Object.create() initialisiert werden können, oder die wörtliche Verwendung Notation (Initialisierungsnotation). Ein Objektinitialisierer ist eine Liste von null oder mehr Paaren von Eigenschaftsnamen und zugehörigen Werten eines Objekts, eingeschlossen in geschweiften Klammern ({})."

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

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

entspricht.

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

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