Como posso adicionar um par de chaves/valores a um objeto JavaScript?
Aqui está o meu objecto literal:
var obj = {key1: value1, key2: value2};
Como posso adicionar {key3: value3}
ao objecto?
22 answers
Há duas formas de adicionar novas propriedades a um objecto:
var obj = {
key1: value1,
key2: value2
};
Usando a notação dos pontos:
obj.key3 = "value3";
Usando uma notação de suporte quadrado:
obj["key3"] = "value3";
O primeiro formulário é usado quando se sabe o nome da propriedade. A segunda forma é usada quando o nome da propriedade é determinado dinamicamente. Como neste exemplo:
var getProperty = function (propertyName) {
return obj[propertyName];
};
getProperty("key1");
getProperty("key2");
getProperty("key3");
A real JavaScript array can be constructed using either:
A matriz literal Notação:
var arr = [];
A notação da matriz:
var arr = new Array();
Object.assign()
Protesto.assign(dest, src1, src2,...) funde objectos.
Substitui dest
com propriedades e valores de (muitos) objectos de origem, depois devolve dest
.
O método
Object.assign()
é usado para copiar os valores de todas as propriedades próprias enumeráveis de um ou mais objectos de origem para um objecto de destino. Vai devolver o objecto alvo.
Vivo exemplo
var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});
document.body.innerHTML = JSON.stringify(obj);
{...}
obj = {...obj, ...pair};
De MDN:
Copia propriedades enumeráveis próprias de um objecto fornecido para um novo objecto.
A clonagem superficial (excluindo protótipos) ou a fusão de objectos é agora possível utilizando uma sintaxe mais curta do que aObject.assign()
.Note que
Object.assign()
triggers setters enquanto spread a sintaxe Não.
Exemplo vivo
Funciona no cromado actual e no Firefox actual. Dizem que não funciona na borda actual.var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};
document.body.innerHTML = JSON.stringify(obj);
Ano 2019 resposta
operador de atribuição de objectos +=
:
obj += {key3: "value3"};
Oops... Entusiasmei-me. O contrabando de informações do futuro é ilegal. Devidamente obscurecido!
Eu afeiçoei-me ao LoDash / sublinhar ao escrever projectos maiores.
Adicionar por obj['key']
ou obj.key
são todas respostas sólidas em JavaScript puro. No entanto, tanto as bibliotecas LoDash e Underscore fornecem muitas funções convenientes adicionais ao trabalhar com objetos e Arrays em geral.
.push()
is for Arrays , not for objects .
Dependendo do que você está procurando, há duas funções específicas que pode ser bom utilizar e dar funcionalidade semelhante à sensação de arr.push()
. Para mais informações verifique os documentos, eles têm alguns bons exemplos lá.
_.juntar (apenas Lodash)
O segundo objecto irá sobrepor ou adicionar ao objecto de base.
Os valores de undefined
não são copiados.
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"}
_.estender / _.atribuir
O segundo objecto irá sobrepor ou adicionar ao objecto de base.
undefined
será copiar.
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}
_.predefinições
O segundo objecto contém valores por omissão que serão adicionados ao objecto base se não existirem.
undefined
Os valores serão copiados se a chave já existir.
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
Além disso, talvez valha a pena mencionar o jQuery.extend, ele funciona similar a _.fundir e pode ser uma opção melhor se você já estiver usando jQuery.O segundo objecto irá sobrepor ou adicionar ao objecto de base.
undefined
valores não são copiados.
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"}
Protesto.atribuir()
Pode valer a pena mencionar o objecto ES6 / ES2015.assign, it functions similar to _.juntar e poderá ser a melhor opção se já estiver a usar um polifill ES6/ES2015 como Babel se quiser polifillar-se a si próprio .O segundo objecto irá sobrepor ou adicionar ao objecto de 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}
Pode usar qualquer um destes (desde que o key3 seja a chave acutal que deseja usar)
arr[ 'key3' ] = value3;
Ou
arr.key3 = value3;
Se a chave 3 é uma variável, então deve fazer:
var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;
Depois disto, pedir {[3] } devolveria o valor de value3
, um literal 3
.
arr.key3 = value3;
Porque o seu arr não é realmente um array... É um protótipo de objecto. A matriz real seria:
var arr = [{key1: value1}, {key2: value2}];
Mas ainda não está certo. Na verdade devia 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});
Object.prototype.push = function( key, value ){
this[ key ] = value;
return this;
}
Você iria utilizá-lo desta maneira:
var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );
Uma Vez Que a função protótipo está a voltar {[2] } podes continuar a corrente .push
até ao fim da tua variável obj
: obj.push(...).push(...).push(...);
Outra característica é que você pode passar um array ou outro objeto como o valor nos argumentos da função push. Veja meu violino para um exemplo de trabalho: http://jsfiddle.net/7tEme/
Você pode criar uma classe com a resposta de @Ionuț G. Stan
function obj(){
obj=new Object();
this.add=function(key,value){
obj[""+key+""]=value;
}
this.obj=obj
}
Criar um novo objecto com a última classe:
my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');
Imprimir o objecto
console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"}
Imprimir uma chave
console.log(my_obj.obj["key3"]) //Return value3
Sou novato em javascript, os comentários são bem-vindos. Por mim, tudo bem.
O Seu exemplo mostra um objecto, Não uma matriz. Nesse caso, a maneira preferida de adicionar um campo a um objeto é simplesmente atribuir a ele, assim:
arr.key3 = value3;
Duas maneiras mais usadas já mencionadas na maioria das respostas
obj.key3 = "value3";
obj["key3"] = "value3";
Mais uma maneira de definir uma propriedade é usando objeto.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 é útil quando você quer ter mais controle ao definir a propriedade. A propriedade definida pode ser definida como enumerável, configurável e escrita pelo utilizador.
No caso de ter vários literais de objectos anónimos dentro de um objecto e querer adicionar outro objecto que contenha pares de chaves / valores, faça isto:
Firebug ' o objecto:
console.log(Comicbook);
O Devolve:
[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";
}
Irá adicionar Object {name="Peanuts", value="12"}
ao objecto do Comicbook
Ou obj['key3'] = value3
ou obj.key3 = value3
irão adicionar o novo par ao obj
.
$.extend(obj,{key3: 'value3'})
. Por exemplo:
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.extend (target[,object1][,objectN]) junta o conteúdo de dois ou mais objectos no primeiro objecto.
E também permite adições/modificações recursivas com $.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>
Pode adicionar desta forma:
arr['key3'] = value3;
Ou por aqui:
arr.key3 = value3;
As respostas que sugerem entrar no objecto com a variável key3
só funcionariam se o valor de key3
fosse 'key3'
.
De Acordo com Acessadores de Propriedade definido no ECMA-262(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, P67), há duas maneiras que você pode fazer para adicionar propriedades a um existe objeto. Todos estes dois sentidos, o motor Javascript vai tratá-los da mesma forma.
A primeira maneira é usar a notação dos pontos:
obj.key3 = value3;
Mas desta forma, deverá usar um nome de identificação após a notação do ponto.
A segunda maneira é usar o suporte Notação:
obj["key3"] = value3;
E outra forma:
var key3 = "key3";
obj[key3] = value3;
Desta forma, poderá usar uma expressão (incluir o nome de identificação) na notação de parêntesis.
Uma forma curta e elegante na próxima Especificação de Javascript (Estágio 3 candidato) é:
obj = { ... obj, ... { key3 : value3 } }
Uma discussão mais profunda pode ser encontrada em expansão de objectos Versus objecto.assign and on Dr. Axel Rauschmayers site.
Já funciona no nó.js desde o lançamento 8.6.0.
Vivaldi, Chrome, Opera e Firefox em versões atualizadas também conhecem essa característica, MAS a Mirosoft não conhece até hoje, nem no Internet Explorer nem no Edge.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);
});
Saída assim: -
[ { 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 } ]
var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
for (var [key, value] of myMap) {
console.log(key + ' = ' + value);
}
var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}
A fim de preparar {[4] } um par de valores-chave para um objecto de modo que para o in trabalhe com esse elemento primeiro faça isto:
var nwrow = {'newkey': 'value' };
for(var column in row){
nwrow[column] = row[column];
}
row = nwrow;
A melhor maneira de conseguir o mesmo é a seguinte:
function getKey(key) {
return `${key}`;
}
var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};
//console.log(obj);
Simplesmente adicionar propriedades:
E queremos adicionar prop2 : 2
a este objecto, estas são as opções mais convenientes:
- operador de Pontos:
object.prop2 = 2;
- parêntesis rectos:
object['prop2'] = 2;
Então qual é que usamos?
O operador de pontos é mais sintaxe limpa e deve ser usado como padrão (imo). No entanto, o operador de pontos não é capaz de adicionar chaves dinâmicas a um objeto, o que pode ser muito útil em alguns casos. Aqui está um exemplo:
const obj = {
prop1: 1
}
const key = Math.random() > 0.5 ? 'key1' : 'key2';
obj[key] = 'this value has a dynamic key';
console.log(obj);
Juntar objectos:
Quando queremos juntar as propriedades de 2 objectos estas são as opções mais convenientes:
-
Object.assign()
, toma um objecto-alvo como argumento, e um ou mais objectos-fonte e irá juntá-los. Por exemplo:
const object1 = {
a: 1,
b: 2,
};
const object2 = Object.assign({
c: 3,
d: 4
}, object1);
console.log(object2);
-
Operador de espalhamento de objectos
...
const obj = {
prop1: 1,
prop2: 2
}
const newObj = {
...obj,
prop3: 3,
prop4: 4
}
console.log(newObj);
Qual é que usamos?
- a sintaxe de spread é menos descritiva e deve ser usada como um imo padrão. Não se esqueça de transpor esta sintaxe para sintaxe que é suportada por todos os navegadores porque é relativamente novo.
-
Object.assign()
é mais dinâmico porque temos acesso a todos os objectos que são passados como argumentos e podem manipulá-los antes de serem atribuídos ao novo Objecto.
arr.push({key3: value3});