Ein Objekt-Initialisierer ist ein Ausdruck, der die Initialisierung einesObject beschreibt. Objekte bestehen ausEigenschaften, die verwendet werden, um ein Objekt zu beschreiben. Die Werte von Objekteigenschaften können entwederprimitive Datentypen oder andere Objekte enthalten.

Die Objektliteralsyntax ist nicht dasselbe wie dieJavaScriptObjectNotation (JSON). Obwohl sie ähnlich aussehen, gibt es Unterschiede zwischen ihnen:

• JSON erlaubtnur die Eigenschaftsdefinition mit der Syntax"property": value. Der Eigenschaftsname muss in doppelten Anführungszeichen stehen, und die Definition kann keine Kurzschrift sein. Berechnete Eigenschaftsnamen sind ebenfalls nicht erlaubt.
• JSON-Objekteigenschaftswerte können nur Zeichenfolgen, Zahlen,true,false,null, Arrays oder ein anderes JSON-Objekt sein. Das bedeutet, dass JSON keine Methoden oder nicht-einfache Objekte wieMap oderRegExp ausdrücken kann.
• In JSON ist"__proto__" ein normaler Eigenschaftsschlüssel. In einem Objektliteralsetzt es das Prototyp des Objekts.

JSON ist einestrikte Teilmenge der Objektliteralsyntax, was bedeutet, dass jeder gültige JSON-Text als Objektliteral geparst werden kann und wahrscheinlich keine Syntaxfehler verursachen würde. Die einzige Ausnahme besteht darin, dass die Objektliteralsyntax doppelte__proto__-Schlüssel verbietet, was nicht aufJSON.parse() zutrifft. Letzteres behandelt__proto__ wie eine normale Eigenschaft und nimmt die letzte Vorkommen als Wert der Eigenschaft. Das einzige Mal, wenn sich der Objektwert, den sie darstellen (a.k.a. ihre Semantik), unterscheidet, ist auch, wenn die Quelle den__proto__-Schlüssel enthält — bei Objektliteralen setzt es das Prototyp des Objekts; bei JSON ist es eine normale Eigenschaft.

console.log(JSON.parse('{ "__proto__": 0, "__proto__": 1 }')); // {__proto__: 1}console.log({ "__proto__": 0, "__proto__": 1 }); // SyntaxError: Duplicate __proto__ fields are not allowed in object literalsconsole.log(JSON.parse('{ "__proto__": {} }')); // { __proto__: {} }console.log({ "__proto__": {} }); // {} (with {} as prototype)

Ein leeres Objekt ohne Eigenschaften kann so erstellt werden:

const object = {};

Der Vorteil derLiteralisierung oderInitialisierer Notation besteht jedoch darin, dass Sie schnell Objekte mit Eigenschaften innerhalb der geschweiften Klammern erstellen können. Sie notieren eine Liste vonSchlüssel: Wert Paaren, getrennt durch Kommas.

Der folgende Code erstellt ein Objekt mit drei Eigenschaften, deren Schlüssel"foo","age" und"baz" sind. Die Werte dieser Schlüssel sind eine Zeichenfolge"bar", die Zahl42 und ein weiteres Objekt.

const object = {  foo: "bar",  age: 42,  baz: { myProp: 12 },};

Sobald Sie ein Objekt erstellt haben, möchten Sie diese möglicherweise lesen oder ändern. Auf Objekteigenschaften kann entweder durch Punktnotation oder Klammernotation zugegriffen werden. (SieheEigenschaftszugreifer für detaillierte Informationen.)

object.foo; // "bar"object["age"]; // 42object.baz; // {myProp: 12}object.baz.myProp; // 12

Wir haben bereits gelernt, wie man Eigenschaften mit der Initialisierersyntax notiert. Oftmals gibt es Variablen in Ihrem Code, die Sie in ein Objekt einfügen möchten. Sie werden so einen Code sehen:

const a = "foo";const b = 42;const c = {};const o = {  a: a,  b: b,  c: c,};

Es gibt eine kürzere Notation, um dasselbe zu erreichen:

const a = "foo";const b = 42;const c = {};// Shorthand property namesconst o = { a, b, c };// In other words,console.log(o.a === { a }.a); // true

Doppelte Eigenschaftsnamen

Wenn Sie denselben Namen für Ihre Eigenschaften verwenden, überschreibt die zweite Eigenschaft die erste.

const a = { x: 1, x: 2 };console.log(a); // {x: 2}

Nach ES2015 sind doppelte Eigenschaftsnamen überall erlaubt, einschließlichstrict mode. Sie können auch doppelte Eigenschaftsnamen inKlassen haben. Die einzige Ausnahme sindprivate Elemente, die im Klassenkörper eindeutig sein müssen.

Eine Eigenschaft eines Objekts kann sich auch auf eineFunktion oder einegetter- odersetter-Methode beziehen.

const o = {  property: function (parameters) {},  get property() {    return 1;  },  set property(value) {},};

Eine Kurznotation ist verfügbar, sodass das Schlüsselwortfunction nicht mehr erforderlich ist.

// Shorthand method namesconst o = {  property(parameters) {},};

Es gibt auch eine Möglichkeit, Generatormethoden prägnant zu definieren.

const o = {  *generator() {    // …  },};

Was gleichwertig ist zu dieser ES5-ähnlichen Notation (aber beachten Sie, dass ECMAScript 5 keine Generatoren hat):

const o = {  generator: function* () {    // …  },};

Für weitere Informationen und Beispiele über Methoden, sieheMethodendefinitionen.

Die Objektinitialisierersyntax unterstützt auch berechnete Eigenschaftsnamen. Damit können Sie einen Ausdruck in eckige Klammern[] setzen, der berechnet und als Eigenschaftsname verwendet wird. Dies erinnert an die Klammernotation derEigenschaftszugreifer-Syntax, die Sie möglicherweise verwendet haben, um Eigenschaften bereits zu lesen und zu setzen.

Jetzt können Sie auch eine ähnliche Syntax in Objektliteralen verwenden:

// Computed property nameslet i = 0;const a = {  [`foo${++i}`]: i,  [`foo${++i}`]: i,  [`foo${++i}`]: i,};console.log(a.foo1); // 1console.log(a.foo2); // 2console.log(a.foo3); // 3const items = ["A", "B", "C"];const obj = {  [items]: "Hello",};console.log(obj); // A,B,C: "Hello"console.log(obj["A,B,C"]); // "Hello"const param = "size";const config = {  [param]: 12,  [`mobile${param.charAt(0).toUpperCase()}${param.slice(1)}`]: 4,};console.log(config); // {size: 12, mobileSize: 4}

Objektliterale unterstützen dieSpread-Syntax. Sie kopiert eigene aufzählbare Eigenschaften aus einem bereitgestellten Objekt in ein neues Objekt.

Flaches Klonen (ohneprototyp) oder das Zusammenführen von Objekten ist jetzt mit einer kürzeren Syntax alsObject.assign() möglich.

const obj1 = { foo: "bar", x: 42 };const obj2 = { foo: "baz", y: 13 };const clonedObj = { ...obj1 };// { foo: "bar", x: 42 }const mergedObj = { ...obj1, ...obj2 };// { foo: "baz", x: 42, y: 13 }

Eine Eigenschaftsdefinition der Form__proto__: value oder"__proto__": value erstellt keine Eigenschaft mit dem Namen__proto__. Stattdessen weist es, wenn der bereitgestellte Wert ein Objekt odernull ist, das[[Prototype]] des erstellten Objekts auf diesen Wert. (Wenn der Wert kein Objekt odernull ist, wird das Objekt nicht verändert.)

Beachten Sie, dass der__proto__-Schlüssel eine standardisierte Syntax ist, im Gegensatz zu den nicht standardisierten und nicht performantenObject.prototype.__proto__-Zugreifern. Es setzt das[[Prototype]] während der Objekterstellung, ähnlich wieObject.create — anstatt die Prototypkette zu mutieren.

const obj1 = {};console.log(Object.getPrototypeOf(obj1) === Object.prototype); // trueconst obj2 = { __proto__: null };console.log(Object.getPrototypeOf(obj2)); // nullconst protoObj = {};const obj3 = { "__proto__": protoObj };console.log(Object.getPrototypeOf(obj3) === protoObj); // trueconst obj4 = { __proto__: "not an object or null" };console.log(Object.getPrototypeOf(obj4) === Object.prototype); // trueconsole.log(Object.hasOwn(obj4, "__proto__")); // false

Nur ein einziger Prototyp-Setter ist in einem Objektliteral erlaubt. Mehrere Prototyp-Setter sind ein Syntaxfehler.

Eigenschaftsdefinitionen, die keine "Doppelpunkt"-Notation verwenden, sind keine Prototyp-Setter. Sie sind Eigenschaftsdefinitionen, die sich identisch zu ähnlichen Definitionen verhalten, die jeden anderen Namen verwenden.

const __proto__ = "variable";const obj1 = { __proto__ };console.log(Object.getPrototypeOf(obj1) === Object.prototype); // trueconsole.log(Object.hasOwn(obj1, "__proto__")); // trueconsole.log(obj1.__proto__); // "variable"const obj2 = { __proto__() { return "hello"; } };console.log(obj2.__proto__()); // "hello"const obj3 = { ["__proto__"]: 17 };console.log(obj3.__proto__); // 17// Mixing prototype setter with normal own properties with "__proto__" keyconst obj4 = { ["__proto__"]: 17, __proto__: {} }; // {__proto__: 17} (with {} as prototype)const obj5 = {  ["__proto__"]: 17,  __proto__: {},  __proto__: null, // SyntaxError: Duplicate __proto__ fields are not allowed in object literals};const obj6 = {  ["__proto__"]: 17,  ["__proto__"]: "hello",  __proto__: null,}; // {__proto__: "hello"} (with null as prototype)const obj7 =  {  ["__proto__"]: 17,  __proto__,  __proto__: null,}; // {__proto__: "variable"} (with null as prototype)

• Eigenschaftszugreifer
• get
• set
• Methodendefinitionen
• Lexikalische Grammatik