Wie kann ich zur Laufzeit JavaScript-Objekte mit dynamischen Eigenschaftsnamen erstellen?

Verwendung dynamischer Eigenschaftsnamen für die Objekterstellung

Beim Programmieren kann es nützlich sein, Objekte mit Eigenschaftsnamen zu erstellen, die bis zur Laufzeit nicht bekannt sind. Dieser Artikel befasst sich mit der Herausforderung, ein Objekt mit indirekten (nicht wörtlichen) Schlüsselnamen zu initialisieren.

Das Problem: Statische Eigenschaftsnamen

Traditionell werden JavaScript-Objekte mit festen, wörtlichen Eigenschaftsnamen initialisiert:

var myAppConfig = {
    iconMap: {
        "phone-type": "icon-phone",
        "agent-type": "icon-headphones"
    }
};

In bestimmten Szenarien sind jedoch dynamische Eigenschaftsnamen erforderlich. Beispielsweise können die Eigenschaftsnamen in einem anderen Objekt gespeichert werden.

Verwenden von berechneten ES6-Eigenschaftsnamen

Wenn Sie ES6 oder einen Transpiler wie Babel verwenden, können Sie berechnete Eigenschaftsnamen verwenden:

var iconMap = {
    [KEYS.PHONE_TYPE]: 'icon-phone',
    [KEYS.AGENT_TYPE]: 'icon-headphones'
};

In dieser Syntax wird der Eigenschaftsname in eckige Klammern eingeschlossen und als Ausdruck ausgewertet. Der Wert von KEYS.PHONE_TYPE wird als Eigenschaftsname für das erste Schlüssel-Wert-Paar verwendet.

Ausgabe:

Als Ergebnis wird das iconMap-Objekt mit den erwarteten dynamischen Eigenschaftsnamen initialisiert :

{
    'phone-type': 'icon-phone',
    'agent-type': 'icon-headphones'
}

Mit diesem Ansatz können Sie zur Laufzeit Objekte mit nicht-literalen Eigenschaftsnamen erstellen und so mehr Flexibilität und Code bieten Anpassungsfähigkeit.

Das obige ist der detaillierte Inhalt vonWie kann ich zur Laufzeit JavaScript-Objekte mit dynamischen Eigenschaftsnamen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!