Como posso adicionar um par chave / valor para um objeto JavaScript?

https://stackoverflow.com/questions/1168807

19-09-2019
|

Pergunta

Aqui é meu objeto literal:

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

Como posso adicionar {key3: value3} ao objeto?

Solução

Existem duas maneiras de adicionar novos Propriedades a um objeto:

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

Usando a notação de ponto:

obj.key3 = "value3";

Usando a notação colchete:

obj["key3"] = "value3";

A primeira forma é usada quando você 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 array JavaScript podem ser construídas usando:

A notação literal de matriz:

var arr = [];

A notação construtor Array:

var arr = new Array();

Outras dicas

ano de 2017 resposta: `Object.assign()`

Object.assign (dest, src1, src2, ...) Fusões objetos.

Ele substitui dest com propriedades e valores de (no entanto muitos) objetos de origem, em seguida, retorna 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 alvo. Ele irá retornar o objeto de destino.

exemplo vivo

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

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

ano de 2018 resposta: objeto operador propagação `{...}`

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

A partir MDN :

cópias possuir propriedades enumeráveis ??de um objeto fornecido para um novo objeto.

-Shallow clonagem (excluindo protótipo) ou fusão de objetos é agora possível usar uma sintaxe mais curto do que Object.assign() .

Note que Object.assign() gatilhos setters enquanto sintaxe propagação não.

exemplo vivo

Ele funciona na atual Chrome e atual Firefox. Eles dizem que não funciona na borda atual.

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

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

ano de 2019 resposta

~~operador de atribuição objeto +=:~~

~~obj += {key3: "value3"};~~

Oops ... I me empolguei. Contrabando de informações do futuro é ilegal. Devidamente obscurecida!

Eu cresci Apaixonado por LoDash / Sublinhado ao escrever projetos maiores.

Adicionando por obj['key'] ou obj.key são todas sólidas respostas JavaScript puro. No entanto, tanto de bibliotecas LoDash e sublinhado que oferecem muitas funções convenientes adicionais ao trabalhar com objetos e matrizes em geral.

.push() é para Arrays , não para objetos .

Dependendo o que você está procurando, há duas funções específicas que podem ser agradável de utilizar e dar funcionalidade semelhante ao a sensação de arr.push(). Para mais informações verifique os docs, eles têm alguns bons exemplos lá.

_.merge (Lodash apenas)

O segundo objeto irá substituir ou adicionar ao objeto base. valores undefined não são copiadas.

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

O segundo objeto irá substituir ou adicionar ao objeto base. undefined serã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", key4: undefined}

_.defaults

O segundo objeto contém padrões que serão adicionados ao objeto de base, se eles não existem. valores undefined serão copiados se a chave já 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

Além disso, pode valer a pena mencionar jQuery.extend, ele funciona semelhante ao _.merge e pode ser uma opção melhor se você já estiver usando jQuery.

O segundo objeto irá substituir ou adicionar ao objeto base. valores undefined não são copiadas.

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 ()

Pode valer a pena mencionar o ES2015 Object.assign ES6 /, ele funciona semelhante ao _.merge e pode ser a melhor opção se você já estiver usando um ES6 / ES2015 polyfill como Babel se você quiser polyfill-se .

O segundo objeto irá substituir ou adicionar ao objeto base. undefined serão copiados.

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}

Você pode usar qualquer um destes (key3 fornecidas são a chave acutal que deseja usar)

arr[ 'key3' ] = value3;

arr.key3 = value3;

Se key3 é uma variável, então você deve fazer:

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

Depois disso, solicitando arr.a_key iria retornar o valor de value3, um 3 literal.

arr.key3 = value3;

porque seu arr não é realmente uma série ... É um objeto de protótipo. A matriz real seria:

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

mas ainda não é certo. Ele realmente deve 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});

Eu sei que já existe uma resposta aceita para isso, mas eu pensei que eu iria documentar a minha ideia em algum lugar. Por favor, [as pessoas] à vontade para criar buracos nesta idéia, como eu não tenho certeza se é a melhor solução ... mas eu só colocar isso juntos há poucos minutos:

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

Você iria utilizá-lo da seguinte maneira:

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

Uma vez que, a função protótipo está retornando this você pode continuar a cadeia .push de até o final de sua 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 impulso. Ver o meu violino para um exemplo de trabalho: http://jsfiddle.net/7tEme/

Você pode criar uma classe com a resposta de @ Ionut G. Stan

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

A criação de um novo objeto 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 objeto

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

Imprimir uma chave

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

Eu sou novato no javascript, os comentários são bem-vindos. Funciona para mim.

Basta adicionar propriedades:

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

Dot operador: object.prop2 = 2;
colchetes: object['prop2'] = 2;

Então qual usamos então?

O operador ponto é sintaxe mais limpa e deve ser usado como um padrão (imo). No entanto, o operador ponto não é capaz de adicionar chaves dinâmicas para um objeto, 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);

Mesclando objetos:

Quando queremos mesclar as propriedades de 2 objetos estas são as opções mais convenientes:

Object.assign(), leva um objeto de destino como um argumento, e um ou mais objetos de origem e fundi-las. Por exemplo:

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

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

console.log(object2);

... objeto operador de propagação

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

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

console.log(newObj);

Qual deles é que vamos usar?

A sintaxe spread é menos detalhado e tem deve ser usado como um padrão imo. Não se esqueceu de transpile esta sintaxe para a sintaxe que é suportado por todos os navegadores, pois é relativamente novo.
Object.assign() é mais dinâmico porque temos acesso a todos os objetos que são passados ??como argumentos e pode manipulá-los antes que eles são designados para o novo objeto.

Seu exemplo mostra um objeto, não um Array. Nesse caso, a forma preferida para adicionar um campo a um objeto é apenas para atribuir-lhe, assim:

arr.key3 = value3;

Dois mais formas já mencionadas na maioria das respostas usado

obj.key3 = "value3";

obj["key3"] = "value3";

Mais uma maneira de definir uma propriedade está usando 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 é útil quando você quer ter mais controle ao definir propriedade. Propriedade definida pode ser definido como enumeráveis, configurável e gravável pelo usuário.

No caso de você ter vários literais objeto anônimo dentro de um objeto e quiser adicionar outro objeto que contém pares de chave / valor, faça o seguinte:

Firebug' o objeto:

console.log(Comicbook);

retornos:

[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 objeto Comicbook

De qualquer obj['key3'] = value3 ou obj.key3 = value3 irá adicionar o novo par ao obj.

No entanto, eu sei jQuery não foi mencionado, mas se você estiver usando, você pode adicionar o objeto através $.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. estender (alvo [, object1] [, objectN]) fusões os conteúdos de dois ou mais objectos em conjunto para o primeiro objecto.

E também permite recursiva acrescenta / modificações 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>

Você pode adicioná-lo desta maneira:

arr['key3'] = value3;

ou desta maneira:

arr.key3 = value3;

As respostas sugerem chaveamento para o objeto com o key3 variável seria apenas trabalho se o valor do key3 foi 'key3'.

De acordo com o acessores de propriedade definido em 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 para um objeto existe. Todos estes dois sentidos, o motor Javascript irá tratá-los da mesma.

A primeira maneira é usar a notação de ponto:

obj.key3 = value3;

Mas desta forma, você deve usar um IdentifierName após a notação de ponto.

A segunda maneira é a notação uso de suporte:

obj["key3"] = value3;

e outra forma:

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

Desta forma, você pode usar um Expression (incluem IdentifierName ) na notação suporte.

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

apoiado pela maioria dos navegadores, e ele verifica se chave de objeto disponível ou não deseja adicionar, se overides valor disponível existente tecla e não disponível que key add com valor

Exemplo 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

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

Exemplo 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"} }

Exemplo 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 fazer isso dessa forma também.

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

Uma maneira curta e elegante na próxima especificação Javascript (fase candidato 3) é:

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

Uma discussão mais profunda pode ser encontrada no vs Object.assign e sobre Dr. Axel Rauschmayers local .

Ele já trabalha em node.js desde o lançamento 8.6.0.

Vivaldi, Chrome, Opera e Firefox em até data lançamentos sei que este recurso também, mas Mirosoft não até hoje, nem no Internet Explorer nem em Borda.

Para preceder um par chave-valor a um objeto para que o na trabalha com esse elemento primeiro fazer isso:

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

A melhor maneira de conseguir mesmo é indicado abaixo:

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

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

//console.log(obj);

Desde a sua uma questão do passado, mas o problema do presente. Gostaria de sugerir mais uma solução:. Basta passar a chave e os valores para a função, e você obterá um objeto mapa

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

arr.push({key3: value3});

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow

Como posso adicionar um par chave / valor para um objeto JavaScript?

Usando a notação de ponto:

Usando a notação colchete:

A notação literal de matriz:

A notação construtor Array:

ano de 2017 resposta: Object.assign()

exemplo vivo

ano de 2018 resposta: objeto operador propagação {...}

exemplo vivo

ano de 2019 resposta operador de atribuição objeto +=: obj += {key3: "value3"}; Oops ... I me empolguei. Contrabando de informações do futuro é ilegal. Devidamente obscurecida!

_.merge (Lodash apenas)

_.extend / _.assign

_.defaults

$ .extend

Object.assign ()

Basta adicionar propriedades:

Mesclando objetos:

ano de 2017 resposta: `Object.assign()`

ano de 2018 resposta: objeto operador propagação `{...}`

ano de 2019 resposta
operador de atribuição objeto `+=`:

`obj += {key3: "value3"};`

Oops ... I me empolguei. Contrabando de informações do futuro é ilegal. Devidamente obscurecida!