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

Variablen als Objektschlüssel in JavaScript-Literalen verwenden

In JavaScript ist es möglich, Objektliterale mithilfe von Schlüssel-Wert-Paaren zu definieren. Beim Versuch, eine Variable als Schlüssel zu verwenden, gelten jedoch bestimmte Einschränkungen.

Beachten Sie den folgenden Codeausschnitt:

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

Dieser Code aktualisiert erfolgreich die CSS-Eigenschaft „top“ eines Elements . Wenn Sie jedoch versuchen, stattdessen eine Variable zu verwenden:

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

schlägt der Code fehl. Der Grund dafür ist, dass Objektliterale erfordern, dass Schlüssel entweder in einfache oder doppelte Anführungszeichen gesetzt werden, Variablennamen dagegen nicht.

ES5 und früher:

In ES5 und früheren Versionen In JavaScript gibt es keine einfache Möglichkeit, Variablen direkt als Objektschlüssel zu verwenden. Eine Problemumgehung besteht darin, ein leeres Objektliteral zu erstellen und die Variable dann dem gewünschten Schlüssel zuzuweisen:

var thetop = "top";

// Create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 und höher:

ES6 führt die ComputedPropertyName-Syntax ein. Dies ermöglicht die Verwendung variabler Ausdrücke als Objektschlüssel:

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

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

Diese Syntax ermöglicht eine sauberere und prägnantere Verwendung Code, insbesondere beim Umgang mit dynamischen Objektschlüsseln. Es wird in modernen Versionen aller gängigen Browser unterstützt.

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