Verwendung dynamischer Eigenschaftsnamen bei der Objektinitialisierung mit ES6

Die Herausforderung beim Erstellen von Objekten mit Eigenschaftsnamen, die aus externen Quellen abgeleitet werden, entsteht häufig bei der Programmierung. In dem in unserer Abfrage beschriebenen Szenario versuchen wir, ein JavaScript-Objekt mit Eigenschaften zu erstellen, deren Schlüssel in einer separaten Variablen, KEYS, definiert sind.

Bei der Zuweisung von Werten zu den Eigenschaften innerhalb des Objekts tritt jedoch ein Fehler auf aufgrund der Verwendung des Punktoperators (.). Dieser Operator ist für literale Objekteigenschaftsnamen reserviert und kann nicht mit dynamischen Eigenschaftsnamen verwendet werden.

Um dieses Problem zu beheben, greifen wir auf die Leistungsfähigkeit von ES6 (EcmaScript 2016) zurück, einer neuen Ergänzung der JavaScript-Standards, die mehr einführt ausdrucksstarke Syntax und Funktionen. Eine dieser Funktionen ist die Syntax für berechnete Eigenschaften, die es uns ermöglicht, Eigenschaftsnamen dynamisch zu definieren.

Mithilfe der Syntax für berechnete Eigenschaften können wir den Code wie folgt umschreiben, wodurch erfolgreich ein Objekt mit der gewünschten dynamischen Eigenschaft erstellt wird Namen:

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

In diesem Code zeigen die eckigen Klammern ([]) um die Eigenschaftsnamen an, dass wir eine berechnete Eigenschaftssyntax verwenden. Der Ausdruck in den Klammern ergibt den Namen der dynamischen Eigenschaft, der aus der Variablen KEYS abgerufen wird.