Como juntar dois objects JavaScript, sem usar o JQUERY

Eu tenho dois objects json obj1 e obj2, eu quero mesclá-los e crete um único object json. O json resultante deve ter todos os valores de obj2 e os valores de obj1 que não estão presentes em obj2.

Question: var obj1 = { "name":"manu", "age":23, "occupation":"SE" } var obj2 = { "name":"manu", "age":23, "country":"india" } Expected: var result = { "name":"manu", "age":23, "occupation":"SE", "country":"india" } 

Existem algumas soluções diferentes para conseguir isso:

1 – Loop in-nativo do javascript :

 var result = {}; for(var key in obj1) result[key] = obj1[key]; for(var key in obj2) result[key] = obj2[key]; 

2 – Object.keys() :

 var result = {}; Object.keys(obj1).forEach(key => result[key] = obj1[key]); Object.keys(obj2).forEach(key => result[key] = obj2[key]); 

3 – Object.assign() :
(Compatibilidade do navegador: Chrome: 45, Firefox (Gecko): 34, Internet Explorer: Sem suporte, Edge: (Sim), Opera: 32, Safari: 9)

 var result = Object.assign({},obj1, obj2); 

4 – Operador de Spread :
A nova solução possível para atingir esse objective é usar o Spread Operator , que foi padronizado a partir do ECMAScript 2015 (6ª edição, ECMA-262) :

Definido em várias seções da especificação: Inicializador de matriz , listas de argumentos

Usando esta nova syntax, você poderia juntar / mesclar objects diferentes em um object como este:

 var result = { ...obj1, ...obj2 }; 

5 – extend function do jQuery ou lodash :

 var result={}; // using jQuery extend $.extend(result, obj1, obj2); // using lodash _.extend(result, obj1, obj2); 

6 – function de merge da lodash :

 var result=_.merge(obj1, obj2); 

Atualização 1:

Lembre-se de que, for in usar o loop nativo no JavaScript nativo, você precisa estar ciente do seu ambiente em termos das possíveis alterações de protótipo nos objects JavaScript básicos e nos tipos de dados globais. Por exemplo, se você estiver usando um js lib que Array.prototype novos itens em Array.prototype ou Object.prototype .

Mas se você estiver disposto a impedir que essas possíveis coisas adicionadas poluam seus objects for in loops, você poderia fazer:

 for(var key in obj1){ if(obj1.hasOwnProperty(key)){ result[key]=obj1[key]; } } 

Atualização 2:

Fui atualizada minha resposta e adicionei o número da solução 4, que é um novo recurso JavaScript, mas ainda não totalmente padronizado. Eu estou usando com o Babeljs, que é um compilador para escrever o JavaScript da próxima geração.

TRABALHO FIDDLE

Maneira mais simples com jQuery –

 var finalObj = $.extend(obj1, obj2); 

Sem Jquery –

 var finalobj={}; for(var _obj in obj1) finalobj[_obj ]=obj1[_obj]; for(var _obj in obj2) finalobj[_obj ]=obj2[_obj]; 

Apenas outra solução usando o underscore.js :

 _.extend({}, obj1, obj2); 

1)

 var merged = {}; for(key in obj1) merged[key] = obj1[key]; for(key in obj2) merged[key] = obj2[key]; 

2)

 var merged = {}; Object.keys(obj1).forEach(k => merged[k] = obj1[k]); Object.keys(obj2).forEach(k => merged[k] = obj2[k]); 

OU

 Object.keys(obj1) .concat(Object.keys(obj2)) .forEach(k => merged[k] = k in obj2 ? obj2[k] : obj1[k]); 

3) maneira mais simples:

 var merged = {}; Object.assign(merged, obj1, obj2); 

Eu usei essa function para mesclar objects no passado, eu usá-lo para adicionar ou atualizar as propriedades existentes no obj1 com valores de obj2 :

 var _mergeRecursive = function(obj1, obj2) { //iterate over all the properties in the object which is being consumed for (var p in obj2) { // Property in destination object set; update its value. if ( obj2.hasOwnProperty(p) && typeof obj1[p] !== "undefined" ) { _mergeRecursive(obj1[p], obj2[p]); } else { //We don't have that level in the heirarchy so add it obj1[p] = obj2[p]; } } } 

Ele irá lidar com vários níveis de hierarquia, bem como objects de nível único. Eu usei como parte de uma biblioteca de utilitários para manipular objects JSON. Você pode encontrá-lo aqui .

Esta function simples mescla recursivamente objects JSON, observe que essa function mescla todo o JSON no primeiro parâmetro ( target ), se você precisar de um novo object, modifique este código.

 var mergeJSON = function (target, add) { function isObject(obj) { if (typeof obj == "object") { for (var key in obj) { if (obj.hasOwnProperty(key)) { return true; // search for first object prop } } } return false; } for (var key in add) { if (add.hasOwnProperty(key)) { if (target[key] && isObject(target[key]) && isObject(add[key])) { this.mergeJSON(target[key], add[key]); } else { target[key] = add[key]; } } } return target; }; 

BTW em vez da function isObject() pode ser usada como esta:

 JSON.stringify(add[key])[0] == "{" 

mas esta não é uma boa solução, porque é preciso ter muitos resources se tivermos objects JSON grandes.