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

recorrer array de objetos javascript

Question

Aquí está mi objeto literal:

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

¿Cómo puedo agregar {key3: value3} al objeto?

Answer 1

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

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

Sobrescribe dest con propiedades y valores de (sin embargo muchos) objetos de origen, luego devuelve dest .

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

Ejemplo 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 las propiedades enumerables propias de un objeto proporcionado en un nuevo objeto.

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

Tenga en cuenta que Object.assign() activa los Object.assign() mientras que la sintaxis de propagación no.

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

Año 2019 respuesta

Operador de asignación de objetos += :

obj += {key3: "value3"};

Vaya ... me dejé llevar. El contrabando de información del futuro es ilegal. ¡Debidamente oscurecido!

Answer 2

Simplemente añadiendo propiedades:

Y queremos agregar prop2 : 2 a este objeto, estas son las opciones más convenientes:

1. Operador de object.prop2 = 2; : object.prop2 = 2;
2. corchetes: object[''prop2''] = 2;

Entonces, ¿cuál usamos entonces?

El operador de punto tiene una sintaxis más limpia y debe usarse como predeterminado (imo). Sin embargo, el operador de punto no es capaz de agregar claves dinámicas a un objeto, lo que puede ser muy útil en algunos casos. Aquí hay un ejemplo:

const obj = {
prop1: 1
}
const key = Math.random() > 0.5 ? ''key1'' : ''key2'';
obj[key] = ''this value has a dynamic key'';
console.log(obj);

Fusionando objetos:

Cuando queremos fusionar las propiedades de 2 objetos, estas son las opciones más convenientes:

1. Object.assign() , toma un objeto de destino como un argumento y uno o más objetos de origen y los fusionará. Por ejemplo:

const object1 = {
a: 1,
b: 2,
};
const object2 = Object.assign({
c: 3,
d: 4
}, object1);
console.log(object2);

2. Objeto propagación operador ...

const obj = {
prop1: 1,
prop2: 2
}
const newObj = {
...obj,
prop3: 3,
prop4: 4
}
console.log(newObj);

¿Cuál usamos?

• La sintaxis de propagación es menos detallada y debe utilizarse como una imo predeterminada. No olvide trasladar esta sintaxis a la sintaxis que es compatible con todos los navegadores porque es relativamente nueva.
• Object.assign() es más dinámico porque tenemos acceso a todos los objetos que se pasan como argumentos y podemos manipularlos antes de que se asignen al nuevo Objeto.

Answer 3

De acuerdo con los Accesores de propiedades definidos en ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), hay dos formas de agregar propiedades a existe un objeto. Todos estos dos modos, el motor de Javascript los tratará igual.

La primera forma es usar la notación de puntos:

obj.key3 = value3;

Pero de esta manera, debe usar un Nombre de identificador después de la notación de puntos.

La segunda forma es usar la notación de corchete:

obj["key3"] = value3;

y otra forma:

var key3 = "key3";
obj[key3] = value3;

De esta manera, podría usar una expresión (incluya IdentifierName ) en la notación del corchete.

Answer 4

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 al definir la propiedad. La propiedad definida puede establecerse como enumerable, configurable y escribible por el usuario.

Answer 5

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

Firebug ''el Objeto:

console.log(Comicbook);

devoluciones:

[Object {name = "Spiderman", value = "11"}, Object {name = "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á el Object {name="Peanuts", value="12"} al Objeto de Comicbook

Answer 6

Hay dos formas de agregar nuevas propiedades a un objeto:

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

Usando la notación de puntos:

obj.key3 = "value3";

Usando notación de corchete:

obj["key3"] = "value3";

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

Una matriz de JavaScript real puede construirse usando:

La notación literal Array:

var arr = [];

La notación constructor Array:

var arr = new Array();

Answer 7

La mejor manera de lograr lo mismo se indica a continuación:

function getKey(key) {
return `${key}`;
}
var obj = {key1: "value1", key2: "value2", [getKey(''key3'')]: "value3"};
//console.log(obj);

Answer 8

Me he aficionado a LoDash / Underscore al escribir proyectos más grandes.

Agregar mediante obj[''key''] u obj.key son todas las respuestas de JavaScript puro y sólido. Sin embargo, las bibliotecas LoDash y Underscore proporcionan muchas funciones adicionales convenientes cuando se trabaja con Objetos y Arrays en general.

.push() es para Arrays , no para objects .

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

_.merge (solo Lodash)

El segundo objeto se sobrescribirá o agregará al objeto base. undefined valores undefined 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 / _.assign

El segundo objeto se 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 valores predeterminados que se agregarán al objeto base si no existen. undefined valores undefined 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á usando jQuery.

El segundo objeto se sobrescribirá o agregará al objeto base. undefined valores undefined 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 que valga la pena mencionar el 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 usted mismo .

El segundo objeto se 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}

Answer 9

O bien obj[''key3''] = value3 u obj.key3 = value3 agregará el nuevo par al obj .

Sin embargo, sé que no se mencionó jQuery, pero si lo está utilizando, puede agregar el objeto a través de $.extend(obj,{key3: ''value3''}) . P.ej:

var obj = {key1: ''value1'', key2: ''value2''};
$(''#ini'').append(JSON.stringify(obj));
$.extend(obj,{key3: ''value3''});
$(''#ext'').append(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

$.extend $.extend fusiona el contenido de dos o más objetos juntos en el primer objeto.

Y también permite adiciones / modificaciones recursivas con $.extend(true,object1,object2); :

var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$("#ini").append(JSON.stringify(object1));
$.extend( true, object1, object2 );
$("#ext").append(JSON.stringify(object1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

Answer 10

Para anteponer un par clave-valor a un objeto, el for in funciona con ese elemento primero:

 var nwrow = {''newkey'': ''value'' };
for(var column in row){
nwrow[column] = row[column];
}
row = nwrow;

Answer 11

Podemos hacer esto de esta manera también.

var myMap = new Map();
myMap.set(0, ''my value1'');
myMap.set(1, ''my value2'');
for (var [key, value] of myMap) {
console.log(key + '' = '' + value);
}

Answer 12

Puede usar cualquiera de estos (siempre que key3 sea la clave 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, solicitar arr.a_key devolvería el valor de value3 , un literal 3 .

Answer 13

Puedes agregarlo de esta manera:

arr[''key3''] = value3;

o de esta manera:

arr.key3 = value3;

Las respuestas que sugieren ingresar el objeto con la variable key3 solo funcionarán si el valor de key3 fuera ''key3'' .

Answer 14

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

Imprimiendo 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.

Answer 15

Sé que ya hay una respuesta aceptada para esto, pero pensé que documentaría mi idea en algún lugar. Por favor [gente] siéntase libre de hacer agujeros en esta idea, ya que no estoy seguro de que sea la mejor solución ... pero puse esto juntos 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" );

Ya que, la función prototipo está regresando a this , puede continuar encadenando .push hasta el final de su variable obj : 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/

Answer 16

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

arr.key3 = value3;

Answer 17

Una forma corta y elegante en la próxima especificación de Javascript (candidato etapa 3) es:

obj = { ... obj, ... { key3 : value3 } }

Se puede encontrar una discusión más profunda en Object spread vs Object.assign y en el sitio del Dr. Axel Rauschmayers .

Ya funciona en node.js desde la versión 8.6.0.

Vivaldi, Chrome, Opera y Firefox en versiones actualizadas también conocen esta característica, pero Mirosoft no lo hace hasta hoy, ni en Internet Explorer ni en Edge.

Answer 18

Ya que es una cuestión del pasado pero el problema del presente. Sugeriría una solución más: simplemente pase la clave y los valores a la función y obtendrá un objeto de mapa.

var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}

Answer 19

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}];

Answer 20

arr.push({key3: value3});

Answer 21

var arrOfObj = [{name: ''eve''},{name:''john''},{name:''jane''}];
var injectObj = {isActive:true, timestamp:new Date()};
// function to inject key values in all object of json array
function injectKeyValueInArray (array, keyValues){
return new Promise((resolve, reject) => {
if (!array.length)
return resolve(array);
array.forEach((object) => {
for (let key in keyValues) {
object[key] = keyValues[key]
}
});
resolve(array);
})
};
//call function to inject json key value in all array object
injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
console.log(newArrOfObj);
});

Salida como esta: -

[ { name: ''eve'',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z },
{ name: ''john'',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z },
{ name: ''jane'',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z } ]

Answer 22

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