Wie kann ich Eigenschaftsnamen in JavaScript-Objektliteralen dynamisch zuweisen?

Verstehen des Verhaltens von Objektliteralen in JavaScript

Bei der Arbeit mit Objektliteralen in JavaScript können Entwickler auf Situationen stoßen, in denen die dynamische Definition von Eigenschaftsnamen wünschenswert ist. Dies kann jedoch zu Verwirrung führen, wenn das beabsichtigte Verhalten nicht verstanden wird.

Betrachten Sie das bereitgestellte Beispiel:

<something>.stop().animate(
    { 'top' : 10 }, 10
);

In diesem Fall weist der Code erfolgreich die Eigenschaft „top“ zu Wert 10 innerhalb eines Objektliterals. Dies liegt daran, dass der Eigenschaftsname in einfache Anführungszeichen gesetzt wird, was eine Literalzeichenfolge als Eigenschaftsschlüssel angibt.

Im Gegensatz dazu, wenn eine Variable als Eigenschaftsname verwendet wird:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

Der Code schlägt fehl, weil JavaScript auf diese Weise dynamisch generierte Eigenschaftsnamen für Objektliterale nicht unterstützt. Vor ES5 bestand die einzige Möglichkeit, dies zu erreichen, darin, das Objektliteral manuell zu erstellen, indem der Wert einem variablen Eigenschaftsnamen zugewiesen wurde:

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10;
<something>.stop().animate(
    aniArgs, 10
);

Mit der Einführung von ES6 haben Entwickler jetzt jedoch Zugriff auf Computed Eigenschaftsnamen für Objektliterale. Mit dieser neuen Syntax können Eigenschaftsnamen dynamisch als in eckige Klammern eingeschlossene Ausdrücke angegeben werden:

var thetop = "top";
var obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

Mit dieser Syntax können Entwickler Objektliterale mit dynamisch zugewiesenen Eigenschaftsnamen erstellen, ähnlich wie im Originalbeispiel mit der Literalzeichenfolge als Eigenschaftsschlüssel.

Das obige ist der detaillierte Inhalt vonWie kann ich Eigenschaftsnamen in JavaScript-Objektliteralen dynamisch zuweisen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!