Wie erstelle ich JavaScript-Objekte mit dynamischen Eigenschaftsnamen?

Erstellen von Objekten mit dynamischen Eigenschaftsnamen

In JavaScript werden Objekte normalerweise mithilfe literaler Schlüssel-Wert-Paare definiert. Es kann jedoch vorkommen, dass die Eigenschaftsnamen dynamisch sind oder zum Zeitpunkt der Objekterstellung nicht bekannt sind. Dies kann durch die Verwendung der Klammernotation erreicht werden.

Problem:

Beachten Sie den folgenden Codeausschnitt:

var KEYS = {} ;

KEYS.PHONE_TYPE = 'phone-type';
KEYS.AGENT_TYPE = 'agent-type';

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

Dieser Code schlägt fehl mit der Fehler „‚:‘ erwartet und stattdessen ‚.‘ gesehen.“ Dies liegt daran, dass Sie versuchen, mithilfe der Punktnotation (.) auf das KEYS-Objekt als Eigenschaft des myAppConfig-Objekts zuzugreifen. Um dieses Problem zu beheben, müssen Sie die Klammernotation [] verwenden, um dynamisch auf Eigenschaften zuzugreifen.

Lösung:

Mit ES6 (oder einem Transpiler wie Babel/browserify) Sie können ein Objekt mit dynamischen Eigenschaftsnamen mithilfe der Klammernotation initialisieren, wie unten gezeigt:

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

In diesem Code sind die Klammern [] um die KEYS-Eigenschaften ermöglichen es Ihnen, die Eigenschaftsnamen basierend auf den im KEYS-Objekt gespeicherten Werten dynamisch anzugeben. Infolgedessen enthält die iconMap-Eigenschaft des myAppConfig-Objekts die gewünschte Wertezuordnung:

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

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