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

https://stackoverflow.com/questions/1168807

19-09-2019
|

Pregunta

Aquí está mi objeto literal:

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

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

Solución

Hay dos formas de añadir nuevas propiedades a un objeto:

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

Uso de la notación de puntos:

obj.key3 = "value3";

Uso de notación de corchetes:

obj["key3"] = "value3";

La primera forma se utiliza cuando se 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 real array JavaScript puede construirse utilizando ya sea:

La notación literal de Array:

var arr = [];

La notación de matriz constructor:

var arr = new Array();

Otros consejos

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

Objeto.assign(destino, src1, src2, ...) fusiona objetos.

Se sobrescribe dest con propiedades y valores de (por muchos) objetos fuente, luego devuelve dest.

El Object.assign() El método 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.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 dispersión de objetos `{...}`

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

De MDN:

Copia sus propias propiedades enumerables 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 colocadores mientras que la sintaxis extendida no.

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 del 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!

he crecido aficionado a la LoDash / subrayado al escribir proyectos de mayor envergadura.

La adición de obj['key'] o obj.key son sólidos respuestas puro JavaScript. Sin embargo, tanto las bibliotecas LoDash y subrayado sí ofrecen muchas funciones convenientes adicionales cuando se trabaja con objetos y matrices en general.

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

Según lo que está buscando, hay dos funciones específicas que pueden ser agradable de utilizar y darle una funcionalidad similar a la de la sensación de arr.push(). Para obtener más información mire los documentos, tienen algunas grandes ejemplos allí.

_.merge (Lodash solamente)

El segundo objeto se sobrescribir o añadir al objeto base. undefined 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 se sobrescribir o añadir al objeto base. se copiará undefined.

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 añadirán al objeto base si no existen. undefined 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 similar a _.merge y puede ser una mejor opción si usted ya está usando jQuery.

El segundo objeto se sobrescribir o añadir al objeto base. undefined 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 ser vale la pena mencionar la ES6 / ES2015 Object.assign, funciona similar a _.merge y puede ser la mejor opción si ya está utilizando un polyfill / ES2015 ES6 como Babel si quiere polyfill mismo .

El segundo objeto se sobrescribir o añadir al objeto base. se copiará undefined.

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}

Se puede utilizar cualquiera de estos (key3 proporcionada es la clave acutal desea utilizar)

arr[ 'key3' ] = value3;

arr.key3 = value3;

Si key3 es una variable, entonces usted debe 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 3 literal.

arr.key3 = value3;

debido a que su arr no es realmente una serie ... Es un objeto prototipo. La matriz real sería:

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

pero todavía no está bien. De hecho, debería ser:

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

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

Sé que ya hay una respuesta aceptada para esto, pero pensé que documentar mi idea alguna parte. Por favor, [la gente] se sienten libres para hacer agujeros en esta idea, ya que no estoy seguro de si es la mejor solución ... pero sólo hay que poner esto junto hace unos minutos:

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

Se podría utilizar de esta manera:

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

Dado que, la función prototipo está volviendo this puede seguir de .push cadena hasta el final de la variable de obj: obj.push(...).push(...).push(...);

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

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

La creación de 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');

Impresión del objeto

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

Impresión de una clave

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

Soy novato en javascript, los comentarios son bienvenidos. Que funciona para mí.

Simplemente añadiendo propiedades:

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

operador punto: object.prop2 = 2;
corchetes: object['prop2'] = 2;

Así que uno qué usamos entonces?

El operador de punto es sintaxis más limpia y se debe utilizar como un defecto (OMI). Sin embargo, el operador de punto no es capaz de añadir claves dinámicas a un objeto, que puede ser muy útil en algunos casos. He aquí 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);

La fusión de objetos:

Cuando queremos combinar las propiedades de los objetos 2 estas son las opciones más convenientes:

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

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

... operador objeto se extiende

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

¿Con cuál usamos?

La sintaxis de propagación es menos detallado y se debe utilizar como un incumplimiento de la OMI. No se olvidó de transpile esta sintaxis para la sintaxis que es soportado por todos los navegadores, ya que es relativamente nuevo.
Object.assign() es más dinámico porque tenemos acceso a todos los objetos que se pasan como argumentos y puede manipular antes de que se asignan al nuevo objeto.

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

arr.key3 = value3;

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

obj.key3 = "value3";

obj["key3"] = "value3";

Una forma más para definir una propiedad está utilizando 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 se desea tener más control mientras se define la propiedad. Propiedad definida se puede establecer como enumerable, configurable y escribible por el usuario.

En caso de que tenga varios literales de objetos anónimos dentro de un objeto y desea agregar otro objeto que contiene los pares clave / valor, haga lo siguiente:

Firebug' el objeto:

console.log(Comicbook);

retornos:

[Object {name = "araña", value = "11"}, Object {name = "Marsipulami", value = "18"}, Object {name = "Garfield", valor = "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

De cualquier obj['key3'] = value3 o obj.key3 = value3 agregarán el nuevo par a la obj.

Sin embargo, sé que jQuery no fue mencionado, pero si usted lo está utilizando, puede agregar el objeto a través $.extend(obj,{key3: 'value3'}). Por ejemplo:.

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>

jQuery. extender (objetivo [, object1] [, objectN]) fusiones el contenido de dos o más objetos juntos en el primer objeto.

Y además se añade recursivo / modificaciones 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>

Usted puede añadir de esta manera:

arr['key3'] = value3;

o de esta manera:

arr.key3 = value3;

Las respuestas que sugiere introducir en el objeto con el key3 variable sólo funcionaría si el valor de key3 era 'key3'.

De acuerdo con Propiedad descriptores de acceso se define en ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), hay dos maneras en que puede hacer para añadir propiedades a una existe objeto. Todas estas dos vías, el motor de Javascript será tratarlos de la misma.

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

obj.key3 = value3;

Pero de esta manera, se debe utilizar un IdentifierName después de la notación de punto.

La segunda forma es utilizar la notación de soporte:

obj["key3"] = value3;

y otra forma:

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

De esta manera, se podría utilizar un Expresión (incluyen IdentifierName ) en la notación de soporte.

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 de la siguiente manera: -

[ { 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 } ]

apoyado por la mayoría de los navegadores, y se comprueba si la clave de objeto disponible o no desea agregar, si disponible que overides existente valor de la clave y No disponible que añadir llave con valor

ejemplo 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

// { red : "this is red color"}

ejemplo 2

let my_object = { inside_object : { car : "maruti" }}

// now i want to add something inside object of my object 

my_object.inside_object.plane = "JetKing";

// { inside_object : { car : "maruti" , plane : "JetKing"} }

ejemplo 3

let my_object = { inside_object : { name : "abhishek" }}

// now i want to add something inside object with new keys birth , gender 

my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";


    // { inside_object : 
//             { name : "abhishek",
//               birth : "8 Aug",
//               gender : "Male" 
//            }   
//       }

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

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

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

Una discusión más profunda se puede encontrar en objeto propagación vs Object.assign y en Dr. Axel Rauschmayers sitio .

Ya se trabaja en Node.js desde el lanzamiento 8.6.0.

Vivaldi, Chrome, Opera y Firefox en hasta la fecha comunicados conocen esta característica también, pero Mirosoft no lo hacen hasta hoy, ni en Internet Explorer ni en el borde.

Para prepend a par clave-valor a un objeto de manera que el en trabaja con ese elemento primero hacer esto:

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

La mejor manera de lograr la misma se indica a continuación:

function getKey(key) {
  return `${key}`;
}

var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};

//console.log(obj);

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

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

arr.push({key3: value3});

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow

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

Uso de la notación de puntos:

Uso de notación de corchetes:

La notación literal de Array:

La notación de matriz constructor:

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

Ejemplo en vivo

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

Ejemplo en vivo

Respuesta del año 2019.

_.merge (Lodash solamente)

_.extend / _.assign

_.defaults

$ .extend

Object.assign ()

Simplemente añadiendo propiedades:

La fusión de objetos:

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

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