¿Es posible agregar propiedades con nombres dinámicos al objeto JavaScript?

En JavaScript, he creado un objeto así:

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?

Si.

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

data["PropertyD"] = 4;

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

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 inicia sesión dataobtendrá esto:

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

Esto hace uso de la nueva sintaxis de Propiedad Computada y Literales de Plantilla .

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 + "'");

Se prefiere el primer método. eval () tiene las preocupaciones obvias de seguridad si está utilizando valores proporcionados por el usuario, así que no lo use si puede evitarlo, pero vale la pena saber que existe y qué puede hacer.

Puede hacer referencia a esto con:

alert(data.someProperty);

o

data(data["someProperty"]);

o

alert(data[propertyName]);

Sé que la pregunta se responde perfectamente, pero también encontré otra forma de agregar nuevas propiedades y quería compartirla con ustedes:

Puedes usar la función Object.defineProperty()

Encontrado en la red de desarrolladores de 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

ES6 presenta nombres de propiedad calculados, que le permiten hacer

let a = 'key'
let myObj = {[a]: 10};
// output will be {key:10}

Aquí, usando tu 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'

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

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

o :

data[newattribute] = somevalue

para llaves dinámicas.

Además de todas las respuestas anteriores, y en caso de que se pregunte cómo vamos a escribir nombres de propiedades dinámicos en el futuro utilizando nombres de propiedades calculados (ECMAScript 6), aquí le mostramos 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

Solo una adición a la respuesta anterior de abeing. 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

Puede agregar propiedades dinámicamente utilizando algunas de las siguientes opciones:

En tu ejemplo:

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

Puede definir una propiedad con un valor dinámico de las siguientes dos formas:

data.key = value;

o

data['key'] = value;

Aún más ... si su clave también es dinámica, puede definirla usando la clase Object con:

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

donde los datos son su objeto, la clave es la variable para almacenar el nombre de la clave y el valor es la variable para almacenar el valor.

¡Espero que esto ayude!

Sé que ya hay varias respuestas a esta publicación, pero no he visto una en la que haya varias propiedades y estén dentro de una matriz. Y, por cierto, esta solución es para ES6.

Por ejemplo, supongamos que tenemos una matriz llamada persona con objetos dentro:

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

Por lo tanto, puede agregar una propiedad con el valor correspondiente. Digamos que queremos agregar un idioma con un valor predeterminado de EN .

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

La matriz de Persona ahora se volvería así:

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

La forma más simple y portátil es.

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

Basado en la respuesta #abeing!

Tenga cuidado al agregar una propiedad al objeto existente utilizando el método. (Punto) .

(.dot) para agregar una propiedad al objeto solo debe usarse si conoce de antemano la 'clave'; de lo contrario, use el método [paréntesis] .

Ejemplo:

   var data = {
        'Property1': 1
    };
    
    // Two methods of adding a new property [ key (Property4), value (4) ] to the
    // existing object (data)
    data['Property2'] = 2; // bracket method
    data.Property3 = 3;    // dot method
    console.log(data);     // { Property1: 1, Property2: 2, Property3: 3 }
    
    // But if 'key' of a property is unknown and will be found / calculated
    // dynamically then use only [bracket] method not a dot method    
    var key;
    for(var i = 4; i < 6; ++i) {
    	key = 'Property' + i;     // Key - dynamically calculated
    	data[key] = i; // CORRECT !!!!
    }
    console.log(data); 
    // { Property1: 1, Property2: 2, Property3: 3, Property4: 4, Property5: 5 }
    
    for(var i = 6; i < 2000; ++i) {
    	key = 'Property' + i; // Key - dynamically calculated
    	data.key = i;         // WRONG !!!!!
    }
    console.log(data); 
    // { Property1: 1, Property2: 2, Property3: 3, 
    //   Property4: 4, Property5: 5, key: 1999 }

Tenga en cuenta el problema al final del registro de la consola: 'clave: 1999' en lugar de Propiedad6: 6, Propiedad7: 7, ........., Propiedad1999: 1999 . Entonces, la mejor manera de agregar propiedades creadas dinámicamente es el método [corchete].

Una buena manera de acceder desde nombres de cadenas dinámicas que contienen objetos (por ejemplo, object.subobject.property)

function ReadValue(varname)
{
    var v=varname.split(".");
    var o=window;
    if(!v.length)
        return undefined;
    for(var i=0;i<v.length-1;i++)
        o=o[v[i]];
    return o[v[v.length-1]];
}

function AssignValue(varname,value)
{
    var v=varname.split(".");
    var o=window;
    if(!v.length)
        return;
    for(var i=0;i<v.length-1;i++)
        o=o[v[i]];
    o[v[v.length-1]]=value;
}

Ejemplo:

ReadValue("object.subobject.property");
WriteValue("object.subobject.property",5);

eval funciona para el valor de lectura, pero el valor de escritura es un poco más difícil.

Una versión más avanzada (crea subclases si no existen y permite objetos en lugar de variables globales)

function ReadValue(varname,o=window)
{
    if(typeof(varname)==="undefined" || typeof(o)==="undefined" || o===null)
        return undefined;
    var v=varname.split(".");
    if(!v.length)
        return undefined;
    for(var i=0;i<v.length-1;i++)
    {
        if(o[v[i]]===null || typeof(o[v[i]])==="undefined") 
            o[v[i]]={};
        o=o[v[i]];
    }
    if(typeof(o[v[v.length-1]])==="undefined")    
        return undefined;
    else    
        return o[v[v.length-1]];
}

function AssignValue(varname,value,o=window)
{
    if(typeof(varname)==="undefined" || typeof(o)==="undefined" || o===null)
        return;
    var v=varname.split(".");
    if(!v.length)
        return;
    for(var i=0;i<v.length-1;i++)
    {
        if(o[v[i]]===null || typeof(o[v[i]])==="undefined")
            o[v[i]]={};
        o=o[v[i]];
    }
    o[v[v.length-1]]=value;
}

Ejemplo:

ReadValue("object.subobject.property",o);
WriteValue("object.subobject.property",5,o);

Esto es lo mismo que o.object.subobject.property

Así es como resolví el problema.

var obj = {

};
var field = "someouter.someinner.someValue";
var value = 123;

function _addField( obj, field, value )
{
    // split the field into tokens
    var tokens = field.split( '.' );

    // if there's more than one token, this field is an object
    if( tokens.length > 1 )
    {
        var subObj = tokens[0];

        // define the object
        if( obj[ subObj ] !== undefined ) obj[ subObj ] = {};

        // call addfield again on the embedded object
        var firstDot = field.indexOf( '.' );
        _addField( obj[ subObj ], field.substr( firstDot + 1 ), value );

    }
    else
    {
        // no embedded objects, just field assignment
        obj[ field ] = value;
    }
}

_addField( obj, field, value );
_addField(obj, 'simpleString', 'string');

console.log( JSON.stringify( obj, null, 2 ) );

Genera el siguiente objeto:

{
  "someouter": {
    "someinner": {
      "someValue": 123
    }
  },
  "simpleString": "string"
}

Puede ser útil si la nueva propiedad mixta se agrega en tiempo de ejecución:

data = { ...data, newPropery: value}

Sin embargo, el operador de propagación utiliza una copia superficial, pero aquí nos asignamos datos para que no pierda nada

Una manera fácil y perfecta

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

var newProperty = 'getThisFromUser';
data[newProperty] = 4;

console.log(data);

Si desea aplicarlo en una matriz de datos (versión ES6 / TS)

const data = [
  { 'PropertyA': 1, 'PropertyB': 2, 'PropertyC': 3 },
  { 'PropertyA': 11, 'PropertyB': 22, 'PropertyC': 33 }
];

const newProperty = 'getThisFromUser';
data.map( (d) => d[newProperty] = 4 );

console.log(data);

Seguro. Piense en ello como un diccionario o una matriz asociativa. Puedes agregarlo en cualquier momento.