Pregunta ¿Es posible agregar propiedades nombradas dinámicamente a un objeto JavaScript?


En JavaScript, he creado un objeto como ese:

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

¿Es posible agregar más propiedades a este objeto después de su creación inicial si el nombre de las propiedades no se determina hasta el tiempo de ejecución? es decir

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


origen


Respuestas:


Sí.

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



Sí, es posible. Asumiendo:

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

Ya sea:

data[propertyName] = propertyValue;

o

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

El primer método es preferido. eval () tiene las preocupaciones de seguridad obvias si está usando valores proporcionados por el usuario, por lo que no los use si puede evitarlos, pero vale la pena saber que existen y qué puede hacer.

Puedes hacer referencia a esto con:

alert(data.someProperty);

o

data(data["someProperty"]);

o

alert(data[propertyName]);

76
2017-07-26 09:27



ES6 por la victoria!

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

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

Si inicias sesión data obtienes esto:

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

Esto hace uso de la nueva sintaxis de propiedad dinámica + literales de plantilla.


63
2018-02-23 14:11



Sé que la pregunta fue respondida perfectamente, pero también encontré otra forma de agregar nuevas propiedades y quería compartirlas contigo:

Puedes usar la función Object.defineProperty() 

Encontrado en Red de desarrolladores Mozilla

Ejemplo:

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



Aquí, usando su notación:

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



Puedes agregar tantas propiedades más como quieras simplemente usando la notación de puntos:

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

o:

data[newattribute] = somevalue

para llaves dinámicas


15
2017-07-26 09:28



además de todas las respuestas anteriores, y en caso de que se pregunte cómo vamos a escribir nombres de propiedades dinámicas en el Futuro usando nombres de propiedad computados (ECMAScript 6), aquí se muestra cómo:

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

personIndex[ personId ]; // "John Doe"

referencia: Comprender ECMAScript 6 - Nickolas Zakas


13
2018-04-01 10:49



Solo una adición a la respuesta de abeing arriba. Puede definir una función para encapsular la complejidad de defineProperty como se menciona a continuación.

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 );

referencia: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript


10
2018-04-08 05:24