Est-il possible d'ajouter dynamiquement des propriétés nommées à l'objet JavaScript?

Question

En JavaScript, j'ai créé un objet comme ça:

 var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};
 

Est-il possible d'ajouter d'autres propriétés à cet objet après sa création initiale si le nom des propriétés n'est pas déterminé avant l'exécution? c'est à dire

 var propName = 'Property' + someUserInput
//imagine someUserInput was 'Z', how can I now add a 'PropertyZ' property to 
//my object?
 

Merci

Answer 1

Oui.

 var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};

data["PropertyD"] = 4;

// dialog box with 4 in it
alert(data.PropertyD);
alert(data["PropertyD"]);
 

Answer 2

Oui c'est possible. En supposant que:

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};
var propertyName = "someProperty";
var propertyValue = "someValue";

Soit:

data[propertyName] = propertyValue;

ou

eval("data." + propertyName + " = '" + propertyValue + "'");

La première méthode est préférable. eval() a, de toute évidence les problèmes de sécurité si vous utilisez les valeurs fournies par l'utilisateur, donc ne l'utilisez pas si vous pouvez l'éviter, mais il est bon de savoir qu'il existe et ce qu'il peut faire.

Vous pouvez faire référence à ce avec:

alert(data.someProperty);

ou

data(data["someProperty"]);

ou

alert(data[propertyName]);

Answer 3

Je sais que la réponse à la question est parfaite, mais j'ai aussi trouvé un autre moyen d'ajouter de nouvelles propriétés et j'ai voulu le partager avec vous:

Vous pouvez utiliser la fonction Object.defineProperty()

Trouvé sur Mozilla Developer Network

Exemple:

 var o = {}; // Creates a new object

// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});
// 'a' property exists in the o object and its value is 37

// Example of an object property added with defineProperty with an accessor property descriptor
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});
o.b = 38;
// 'b' property exists in the o object and its value is 38
// The value of o.b is now always identical to bValue, unless o.b is redefined

// You cannot try to mix both :
Object.defineProperty(o, "conflict", { value: 0x9f91102, 
                                       get: function() { return 0xdeadbeef; } });
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
 

Answer 4

Ici, en utilisant votre notation:

 var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};
var propName = 'Property' + someUserInput
//imagine someUserInput was 'Z', how can I now add a 'PropertyZ' property to 
//my object?
data[propName] = 'Some New Property value'
 

Answer 5

Vous pouvez ajouter autant de propriétés que vous le souhaitez simplement en utilisant la notation par points:

 var data = {
    var1:'somevalue'
}
data.newAttribute = 'newvalue'
 

ou :

 data[newattribute] = somevalue
 

pour les clés dynamiques.