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

new object javascript

Question

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?

Answer 1

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''

Answer 2

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"
}

Answer 3

ES6 para 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 registra data obtiene esto:

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

Esto hace uso de la nueva sintaxis de propiedades calculadas y los literales de plantilla .

Answer 4

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

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

Basado en la respuesta #abeing!

Answer 5

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

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

o :

data[newattribute] = somevalue

para las teclas dinámicas.

Answer 6

Puedes agregar propiedades dinámicamente usando 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 maneras:

data.key = value;

o

data[''key''] = value;

Aún más ... si su clave también es dinámica, puede definirla utilizando la clase Objeto 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!

Answer 7

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

Puede utilizar 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

Answer 8

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

Para ilustración, digamos que tenemos una matriz llamada person 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 personas ahora se volvería así:

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

Answer 9

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

Answer 10

Sí.

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

data["PropertyD"] = 4;

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

Answer 11

Seguro. Piense en ello como un diccionario o matriz asociativa. Puedes añadirlo en cualquier momento.

Answer 12

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

Answer 13

Una buena forma 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 escribir el valor es un poco más difícil.

Una versión más avanzada (crear 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

Answer 14

además de todas las respuestas anteriores, y en caso de que se esté preguntando cómo vamos a escribir nombres de propiedades dinámicas en el futuro usando Nombres de propiedades calculados (ECMAScript 6), a continuación le indicamos cómo:

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

personIndex[ personId ]; // "John Doe"

referencia: Entendiendo ECMAScript 6 - Nickolas Zakas