Kann ich Variablen als Objekteigenschaftsnamen in JavaScript verwenden?

So definieren Sie Objekteigenschaftennamen in JavaScript dynamisch

JavaScript-Objektliterale eignen sich zum Definieren einer Sammlung von Schlüssel-Wert-Paaren, bei denen es sich um Schlüssel handelt repräsentieren Eigenschaftsnamen und Werte repräsentieren Eigenschaftswerte. Es stellt sich jedoch häufig die Frage: Können wir eine Variable als Schlüssel in einem Objektliteral verwenden?

Die Antwort auf diese Frage hängt von der JavaScript-Version ab. In ES5 und früheren Versionen funktioniert die direkte Verwendung einer Variablen als Schlüssel in einem Objektliteral nicht. Zum Beispiel:

var thetop = 'top';
something.stop().animate({ thetop: 10 }, 10); // Doesn't work

Dies liegt daran, dass Objekteigenschaftennamen in ES5 in doppelte oder einfache Anführungszeichen eingeschlossen werden müssen.

Lösung für ES5 und früher

Um eine Variable als Schlüssel in ES5 zu verwenden, müssen Sie ein Objektliteral erstellen und den Eigenschaftswert manuell zuweisen, indem Sie den Variablennamen als Eigenschaft verwenden Schlüssel:

var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to property using variable name as key
something.stop().animate(aniArgs, 10); // Pass the object literal to the animate method

ES6 Berechnete Eigenschaftsnamen

ES6 führt das Konzept von ComputedPropertyName ein, das die Verwendung von Variablen und Ausdrücken als Eigenschaftsnamen innerhalb von Objektliteralen ermöglicht. Diese Syntax sieht so aus:

const obj = { [variableOrExpression]: value };

Mit dieser Syntax können Sie Eigenschaftsnamen mithilfe von Variablen dynamisch definieren, zum Beispiel:

var thetop = 'top';
const obj = { [thetop]: 10 };
console.log(obj.top); // Prints 10

Diese Syntax wird in modernen Browsern unterstützt und kann die vereinfachen Prozess der dynamischen Definition von Objekteigenschaftsnamen.

Das obige ist der detaillierte Inhalt vonKann ich Variablen als Objekteigenschaftsnamen in JavaScript verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!