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?

Author: T.J. Crowder, 2009-07-23

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();
 1716
Author: Ionuț G. Stan, 2011-11-08 16:36:31
Ano 2017 resposta: 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);
Resposta de 2018: operador de espalhamento de objectos {...}
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 a Object.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!
 109
Author: 7vujy0f0hy, 2017-12-30 20:31:56

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}
 78
Author: Sir.Nathan Stassen, 2015-12-28 17:18:57

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.

 64
Author: seth, 2012-03-31 00:03:53
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}];
 27
Author: Robert Koritnik, 2009-07-22 23:25:33
var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});
 23
Author: Vicky, 2017-09-26 08:46:16
Sei que já há uma resposta aceite para isto, mas pensei em documentar a minha ideia algures. Por favor [Pessoas] sinta-se livre para fazer buracos nesta idéia, como eu não tenho certeza se é a melhor solução... mas juntei isto há uns minutos.
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/

 9
Author: sadmicrowave, 2013-06-26 18:34:00

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.
 8
Author: Eduen Sarceno, 2017-05-23 11:47:29

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;
 6
Author: bdukes, 2009-07-22 23:25:57

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.

 6
Author: Sanchay Kumar, 2017-01-13 06:14:37

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

 5
Author: nottinhill, 2012-08-01 14:28:41

Ou obj['key3'] = value3 ou obj.key3 = value3 irão adicionar o novo par ao obj.

No entanto, sei que o jQuery não foi mencionado, mas se estiver a usá-lo, pode adicionar o objecto através de $.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>
 5
Author: Armfoot, 2015-06-08 17:47:25

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

 4
Author: wombleton, 2009-07-22 23:33:35

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.

 4
Author: Chen Yang, 2013-08-02 03:51:40

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.
 3
Author: xyxyber, 2017-12-04 19:00:55
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 } ]
 3
Author: Sayed Tauseef Haider Naqvi, 2017-12-16 16:10:44
Também podemos fazer isto desta maneira.
var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
 for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
 }
 2
Author: Miraj Hamid, 2017-09-07 03:36:55
[[2]desde que é uma questão do passado, mas o problema do presente. Sugeriria mais uma solução: basta passar a chave e os valores para a função e você terá um objeto de mapa.
var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}
 1
Author: PPing, 2018-02-16 11:42:06

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;
 0
Author: relipse, 2016-12-08 22:24:04

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);
 0
Author: sgajera, 2017-11-21 04:19:41

Simplesmente adicionar propriedades:

E queremos adicionar prop2 : 2 a este objecto, estas são as opções mais convenientes:

  1. operador de Pontos: object.prop2 = 2;
  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:

  1. 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.
 0
Author: Willem van der Veen, 2018-08-23 20:01:57
arr.push({key3: value3});
 -17
Author: dfa, 2009-07-22 23:23:04