¿Cómo puedo agregar un key/valor par a un objeto de JavaScript?

Te traemos el hallazgo a esta incógnita, o por lo menos eso pensamos. Si continuas con interrogantes compártelo en un comentario y sin dudarlo te ayudaremos

Solución:

Hay dos formas de agregar nuevos propiedades a un objeto:

var obj = 
    key1: value1,
    key2: value2
;

Usando la notación de puntos:

obj.key3 = "value3";

Usando la notación de corchetes:

obj["key3"] = "value3";

La primera forma se utiliza cuando conoce el nombre de la propiedad. La segunda forma se utiliza 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");

A verdadero JavaScript array se puede construir usando:

La notación literal de matriz:

var arr = [];

La notación del constructor Array:

var arr = new Array();

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

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

sobrescribe dest con propiedades y valores de (cualquiera que sean) los objetos de origen, luego devuelve dest.

los Object.assign() El método se utiliza para copiar los valores de todas las propiedades enumerables propias 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;

Desde 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() desencadena setters mientras que la sintaxis extendida no lo hace.

ejemplo en vivo

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

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

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

respuesta año 2019

Operador de asignación de objetos +=:

obj += key3: "value3";

Ups… Me dejé llevar. El contrabando de información del futuro es ilegal. ¡Debidamente oscurecido!

Me he encariñado con LoDash / Underscore cuando escribo proyectos más grandes.

agregando 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 brindar una funcionalidad similar a la sensación de arr.push(). Para obtener más información, consulte los documentos, tienen algunos excelentes ejemplos allí.

_.merge (solo Lodash)

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" 

_.extender / _.asignar

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

_.predeterminados

El segundo objeto contiene valores predeterminados que se agregarán al objeto base si no existen.
undefined los valores se copiarán si key 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"

$.extender

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á usando 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"

Objeto.assign()

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

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

Comentarios y calificaciones

Acuérdate de que tienes la capacidad de glosar si te fue de ayuda.

Utiliza Nuestro Buscador