Wie kann ich Objektschlüssel mithilfe von Variablen in JavaScript dynamisch festlegen?

Objektschlüssel mithilfe von Variablen in JavaScript festlegen

In JavaScript kann es beim Erstellen von Objekten vorkommen, dass Sie den Wert des Schlüssels mithilfe einer Variablen dynamisch festlegen möchten. Wenn Sie jedoch einfach der allgemeinen Objektinitialisierungssyntax folgen, werden Sie feststellen, dass der Schlüssel auf den Namen der Variablen und nicht auf den beabsichtigten Wert gesetzt ist.

Problembeschreibung

Der folgende Codeausschnitt veranschaulicht das Problem:

var key = "happyCount";
myArray.push({ key: someValueArray });

Eine Untersuchung von myArray nach diesem Vorgang zeigt, dass der Schlüssel für jedes Objekt „key“ ist und nicht der beabsichtigte, im Schlüssel gespeicherte Wert Variable.

Lösung: Zuerst das Objekt erstellen

Um dieses Problem zu beheben, erstellen Sie das Objekt, bevor Sie den Schlüssel mithilfe der Klammernotation [] festlegen. Mit dieser Syntax können Sie den Wert des Schlüssels dynamisch aus einer Variablen festlegen.

var key = "happyCount";
var obj = {};

obj[key] = someValueArray;
myArray.push(obj);

Jetzt wird der Schlüssel des erstellten Objekts auf den Wert der Schlüsselvariablen gesetzt.

ECMAScript 2015 Berechnet Eigenschaftsnamen

ECMAScript 2015 (ES6) führte berechnete Eigenschaftsnamen ein, eine Funktion, die noch mehr Flexibilität bei der Definition ermöglicht Objektschlüssel dynamisch. Diese Syntax verwendet eckige Klammern [], um den Eigenschaftsnamen einzuschließen, der ein beliebiger gültiger JavaScript-Ausdruck sein kann.

const yourKeyVariable = "happyCount";
const someValueArray = [...];

const obj = {
    [yourKeyVariable]: someValueArray,
};

Dieser Code erzielt das gleiche Ergebnis wie die vorherige Lösung, verwendet jedoch die berechnete Syntax für Eigenschaftsnamen prägnanter und ausdrucksvoller.

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