Warum lässt JavaScript dynamische Objektschlüssel nicht direkt in Objektliteralen zu?

JavaScript-Objektschlüssel aus Variablenrätsel

Bei der Verwendung von Objektliteralen in JavaScript kann es zu einem eigenartigen Verhalten kommen, wenn Sie einer Dynamik eine Variable zuweisen Der Eigenschaftsschlüssel funktioniert nicht. Betrachten Sie diese beiden Codefragmente:

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

Warum die Diskrepanz?

Das erste Snippet setzt erfolgreich die „top“-Eigenschaft eines Objekts unter Verwendung der Punktnotation. Das zweite Snippet schlägt jedoch fehl, da JavaScript die Verwendung von Variablen zum Definieren dynamischer Objekteigenschaftsnamen direkt in Objektliteralen nicht zulässt.

Lösung in ES5 und früher

Zur dynamischen Zuweisung Eigenschaftsnamen aus Variablen in ES5 und früher müssen Sie das Objektliteral manuell erstellen:

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to variable property name
<something>.stop().animate(aniArgs, 10);

Lösung in ES6 und später

ES6 führte „ComputedPropertyName“ in die Objektliteralgrammatik ein und ermöglichte die direkte Zuweisung dynamischer Eigenschaftsnamen aus Variablen:

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

Diese Syntax wird in den neuesten Versionen von unterstützt Hauptbrowser.

Das obige ist der detaillierte Inhalt vonWarum lässt JavaScript dynamische Objektschlüssel nicht direkt in Objektliteralen zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!