Wie kann ich Variablen als Schlüssel in JavaScript-Objektliteralen verwenden?

Dynamische Schlüsselwertzuweisung in JavaScript-Objektliteralen

Trotz seiner weit verbreiteten Verwendung in Animationen stellt JavaScript eine Herausforderung dar, wenn es um die Verwendung von Variablen geht als Schlüssel innerhalb von Objektliteralen. Während Syntax wie „.stop().animate({ 'top' : 10 }, 10);“ Weist Schlüsseln in Anführungszeichen nahtlos Werte zu und versucht, Variablen als Schlüssel zu verwenden, wie in „var thetop = 'top'; .stop().animate({ thetop : 10 }, 10);“, schlägt fehl .

Der Grund für die Diskrepanz

{ thetop : 10 } stellt ein gültiges Objekt dar Literale Syntax. Der Code weist JavaScript an, ein Objekt mit einer Eigenschaft namens thetop zu erstellen und ihm den Wert 10 zuzuweisen. Bemerkenswert ist, dass sowohl { thetop : 10 } als auch { "thetop" : 10 } identische Objektstrukturen erzeugen.

Umgehung der Einschränkung in ES5 und früher

Vor ES6, Nutzung von Variablen als Eigenschaftsnamen innerhalb Objektliterale waren unmöglich. Die Problemumgehung bestand darin, zunächst ein Objektliteral zu erstellen und anschließend dessen Eigenschaften Werte zuzuweisen, wobei die Variable als Schlüssel verwendet wurde, beispielhaft dargestellt als:

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

ES6 und das Aufkommen berechneter Eigenschaftsnamen

ES6 revolutionierte diese Landschaft durch die Einführung von ComputedPropertyNames in der Objektliteralsyntax. Diese Weiterentwicklung ermöglicht eine Codierung wie folgt:

var thetop = "top", obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

Diese modernisierte Syntax ermöglicht Entwicklern die nahtlose Verwendung von Variablen als Eigenschaftsnamen in Objektliteralen in modernen Versionen gängiger Browser.

Das obige ist der detaillierte Inhalt vonWie kann ich Variablen als Schlüssel in JavaScript-Objektliteralen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!