Pregunta ¿Cómo puedo agregar un par clave / valor a un objeto JavaScript?


Aquí está mi objeto literal:

var obj = {key1: value1, key2: value2};

Como puedo agregar {key3: value3} al objeto?


974
2017-07-22 23:21


origen


Respuestas:


Hay dos formas de agregar nuevas propiedades a un objeto:

var obj = {
    key1: value1,
    key2: value2
};

Usando notación de puntos:

obj.key3 = "value3";

Utilizando la notación de corchetes cuadrados:

obj["key3"] = "value3";

El primer formulario se usa cuando conoce el nombre de la propiedad. El segundo formulario se usa cuando el nombre de la propiedad se determina dinámicamente. Como en este ejemplo:

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

UN real La matriz de JavaScript se puede construir usando:

La notación literal Array:

var arr = [];

La notación del constructor Array:

var arr = new Array();

1654
2017-07-22 23:25



Respuesta del año 2017: Object.assign()

Object.assign (dest, src1, src2, ...) fusiona objetos.

Sobrescribe dest con propiedades y valores de (sin importar cuántos) objetos fuente, luego regresa dest.

los Object.assign() método se utiliza para copiar los valores de todas las propiedades enumerables de uno o más objetos de origen a un objeto de destino. Devolverá el objeto de destino.

Ejemplo en vivo

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

Respuesta del año 2018: operador de propagación de objetos {...}

obj = {...obj, ...pair};

De MDN:

Copia propiedades enumerables propias de un objeto proporcionado en un nuevo objeto.

La clonación superficial (excluyendo el prototipo) o la fusión de objetos ahora es posible usando una sintaxis más corta que Object.assign().

Tenga en cuenta que Object.assign() desencadenantes Setters mientras que la sintaxis extendida no.

Ejemplo en vivo

Funciona en Chrome actual y Firefox actual. Dicen que no funciona en Edge actual.

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};

document.body.innerHTML = JSON.stringify(obj);

Respuesta del año 2019

Operador de asignación de objetos  +=:

obj += {key3: "value3"};


81
2017-11-04 23:51



Me he encariñado con el LoDash / Guion bajo al escribir proyectos más grandes.

Añadiendo por obj['key'] o obj.key son todas respuestas sólidas de JavaScript puro. Sin embargo, las bibliotecas LoDash y Underscore proporcionan muchas funciones convenientes adicionales cuando se trabaja con objetos y matrices en general.

.push() es para matrices, no para objetos.

Dependiendo de lo que esté buscando, hay dos funciones específicas que pueden ser agradables de utilizar y ofrecen una funcionalidad similar a la sensación de arr.push(). Para obtener más información, consulte los documentos, tienen algunos buenos ejemplos allí.

_.unir (Lodash solamente)

El segundo objeto sobrescribirá o agregará al objeto base. undefined los valores no se copian

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"} 

_.extend / _.assign

El segundo objeto sobrescribirá o agregará al objeto base. undefined será copiado

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_.defaults

El segundo objeto contiene los valores predeterminados que se agregarán al objeto base si no existen. undefined los valores se copiarán si la clave ya existe.

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$ .extend

Además, puede valer la pena mencionar jQuery.extend, funciona de manera similar a _.merge y puede ser una mejor opción si ya está utilizando jQuery.

El segundo objeto sobrescribirá o agregará al objeto base. undefined los valores no se copian

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

Object.assign ()

Puede valer la pena mencionar el Object.assign ES6 / ES2015, funciona de manera similar a _.merge y puede ser la mejor opción si ya está utilizando un polyfill ES6 / ES2015 como Babel si quieres rellenarte.

El segundo objeto sobrescribirá o agregará al objeto base. undefined será copiado

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

77
2017-11-24 18:11



Puede usar cualquiera de estos (siempre que key3 sea la clave acutal que desea usar)

arr[ 'key3' ] = value3;

o

arr.key3 = value3;

Si key3 es una variable, entonces debes hacer:

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

Después de esto, solicitando arr.a_key devolvería el valor de value3, un literal 3.


62
2017-07-22 23:22



arr.key3 = value3;

porque tu arr no es realmente una matriz ... Es un objeto prototipo. La matriz real sería:

var arr = [{key1: value1}, {key2: value2}];

pero todavía no está bien. En realidad debería ser:

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

26
2017-07-22 23:25



var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

23
2017-10-27 17:49



Sé que ya hay una respuesta aceptada para esto, pero pensé que documentaría mi idea en alguna parte. Por favor [la gente] se siente libre de hacer agujeros en esta idea, ya que no estoy seguro de si es la mejor solución ... pero acabo de armar esto hace unos minutos:

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

Lo utilizarías de esta manera:

var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );

Desde entonces, la función del prototipo está volviendo this puedes continuar encadenando .pushHasta el final de tu obj variable: obj.push(...).push(...).push(...);

Otra característica es que puede pasar una matriz u otro objeto como el valor en los argumentos de la función de inserción. Ver mi violín para un ejemplo de trabajo: http://jsfiddle.net/7tEme/


8
2018-06-26 18:34



Puedes crear una clase con la respuesta de @ Ionuţ G. Stan

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

Creando un nuevo objeto con la última clase:

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

Imprimir el objeto

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"} 

Imprimir una clave

console.log(my_obj.obj["key3"]) //Return value3

Soy novato en Javascript, los comentarios son bienvenidos. Funciona para mi.


8
2017-12-28 01:34



Su ejemplo muestra un objeto, no una matriz. En ese caso, la forma preferida de agregar un campo a un objeto es asignarlo, de esta forma:

arr.key3 = value3;

6
2017-07-22 23:25



Dos formas más utilizadas ya mencionadas en la mayoría de las respuestas

obj.key3 = "value3";

obj["key3"] = "value3";

Una forma más de definir una propiedad es usar Object.defineProperty ()

Object.defineProperty(obj, 'key3', {
  value: "value3",       // undefined by default
  enumerable: true,      // false by default
  configurable: true,    // false by default
  writable: true         // false by default
});

Este método es útil cuando desea tener más control mientras define la propiedad. La propiedad definida se puede establecer como enumerable, configurable y escribible por el usuario.


6
2018-01-13 06:14



En caso de que tenga varios literales de Objeto anónimos dentro de un Objeto y quiera agregar otro Objeto que contenga pares clave / valor, haga esto:

Firebug 'el Objeto:

console.log(Comicbook);

devoluciones:

[Objeto {nombre = "Hombre araña", valor = "11"}, Objeto {nombre = "Marsipulami",   value = "18"}, Object {name = "Garfield", value = "2"}]

Código:

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

agregará Object {name="Peanuts", value="12"} al Objeto Comicbook


5
2017-08-01 14:28