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


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?

573
2017-07-26 09:24


origine


Réponses:


Oui.

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

data["PropertyD"] = 4;

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


948
2017-07-26 09:27



Oui c'est possible. En supposant:

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

Non plus:

data[propertyName] = propertyValue;

ou

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

La première méthode est préférée. eval () a des problèmes de sécurité évidents si vous utilisez des valeurs fournies par l'utilisateur, donc ne l'utilisez pas si vous pouvez l'éviter mais il vaut la peine de savoir qu'il existe et ce qu'il peut faire.

Vous pouvez référencer ceci avec:

alert(data.someProperty);

ou

data(data["someProperty"]);

ou

alert(data[propertyName]);

76
2017-07-26 09:27



ES6 pour la victoire!

const b = 'b';
const c = 'c';

const data = {
    a: true,
    [b]: true, // dynamic property
    [`interpolated-${c}`]: true, // dynamic property + interpolation
    [`${b}-${c}`]: true
}

Si vous vous connectez data vous obtenez ceci:

{
  a: true,
  b: true,
  interpolated-c: true,
  b-c: true
}

Ceci utilise la nouvelle syntaxe de propriété dynamique + les littéraux de gabarit.


63
2018-02-23 14:11



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 Réseau de développeurs Mozilla

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

50
2017-08-15 08:41



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'

17
2017-07-26 09:34



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.


15
2017-07-26 09:28



en plus de toutes les réponses précédentes, et au cas où vous vous demandez comment nous allons écrire des noms de propriété dynamiques dans le Avenir en utilisant les noms de propriété calculés (ECMAScript 6), voici comment:

var person = "John Doe";
var personId = "person_" + new Date().getTime();
var personIndex = {
    [ personId ]: person
//  ^ computed property name
};

personIndex[ personId ]; // "John Doe"

référence: Comprendre ECMAScript 6 - Nickolas Zakas


13
2018-04-01 10:49



Juste un ajout à la réponse d'abeing ci-dessus. Vous pouvez définir une fonction pour encapsuler la complexité de defineProperty comme mentionné ci-dessous.

var defineProp = function ( obj, key, value ){
  var config = {
    value: value,
    writable: true,
    enumerable: true,
    configurable: true
  };
  Object.defineProperty( obj, key, config );
};

//Call the method to add properties to any object
defineProp( data, "PropertyA",  1 );
defineProp( data, "PropertyB",  2 );
defineProp( data, "PropertyC",  3 );

référence: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript


10
2018-04-08 05:24



Vous pouvez ajouter des propriétés dynamiquement en utilisant certaines des options ci-dessous:

Dans votre exemple:

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

Vous pouvez définir une propriété avec une valeur dynamique des deux manières suivantes:

data.key = value;

ou

data['key'] = value;

Encore plus ... si votre clé est aussi dynamique, vous pouvez définir en utilisant la classe Object avec:

Object.defineProperty(data, key, withValue(value));

Les données est ton objet, clé est la variable pour stocker le nom de la clé et valeur est la variable pour stocker la valeur.

J'espère que ça aide!


7
2017-11-12 14:34



Je sais qu'il y a déjà plusieurs réponses à ce post, mais je n'en ai pas vu une où il y a plusieurs propriétés et elles sont dans un tableau. Et cette solution est d'ailleurs pour ES6.

Par exemple, disons que nous avons un tableau nommé personne avec des objets à l'intérieur:

 let Person = [{id:1, Name: "John"}, {id:2, Name: "Susan"}, {id:3, Name: "Jet"}]

Ainsi, vous pouvez ajouter une propriété avec la valeur correspondante. Disons que nous voulons ajouter un La langue avec une valeur par défaut de EN.

Person.map((obj)=>({...obj,['Language']:"EN"}))

le La personne tableau maintenant deviendrait comme ceci:

Person = [{id:1, Name: "John", Language:"EN"}, 
{id:2, Name: "Susan", Language:"EN"}, {id:3, Name: "Jet", Language:"EN"}]

5
2017-10-01 12:41



Le moyen le plus simple et le plus portable est.

var varFieldName = "good";
var ob = {};
Object.defineProperty(ob, varFieldName , { value: "Fresh Value" });

Basé sur #abeing réponse!


2
2018-03-30 11:23