Comment joindre deux objects JavaScript, sans utiliser JQUERY

J’ai deux objects json obj1 et obj2, je veux les fusionner et créer un seul object json. Le résultat json devrait avoir toutes les valeurs de obj2 et les valeurs de obj1 qui n’est pas présent dans 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" } 

Il existe deux solutions différentes pour y parvenir:

1 – Boucle en javascript native :

 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() :
(Compatibilité de navigateur: Chrome: 45, Firefox (Gecko): 34, Internet Explorer: Pas de support, Edge: (Oui), Opera: 32, Safari: 9)

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

4 – Opérateur d’épandage :
La nouvelle solution possible pour atteindre cet objective est d’utiliser Spread Operator , qui a été normalisé à partir d’ ECMAScript 2015 (6ème édition, ECMA-262) :

Défini dans plusieurs sections de la spécification: Initialiseur de tableaux , listes d’arguments

En utilisant cette nouvelle syntaxe, vous pouvez joindre / fusionner différents objects dans un object comme celui-ci:

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

5 – extend fonction de jQuery ou lodash :

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

6 – fonction de merge de lodash :

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

Mise à jour 1:

Gardez à l’esprit que l’utilisation for in loop dans du code JavaScript natif nécessite que vous connaissiez votre environnement en termes de modifications de prototypes possibles dans les objects JavaScript de base et les types de données globaux. Par exemple, si vous utilisez une librairie js qui ajoute de nouveaux éléments à Array.prototype ou Object.prototype .

Mais si vous souhaitez empêcher ces éléments supplémentaires de polluer vos objects dans for in boucles, vous pouvez:

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

Mise à jour 2:

J’ai été mis à jour ma réponse et ajouté le numéro de solution 4, qui est une nouvelle fonctionnalité JavaScript mais pas encore complètement normalisée. Je l’utilise avec Babeljs qui est un compilateur pour écrire du code JavaScript de la prochaine génération.

FIDDLE DE TRAVAIL

Façon la plus simple avec Jquery –

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

Sans Jquery –

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

Juste une autre solution en utilisant 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) manière la plus simple:

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

J’ai utilisé cette fonction pour fusionner des objects dans le passé, je l’utilise pour append ou mettre à jour des propriétés existantes sur obj1 avec des valeurs 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]; } } } 

Il traitera plusieurs niveaux de hiérarchie ainsi que des objects à un seul niveau. Je l’ai utilisé dans le cadre d’une bibliothèque d’utilitaires pour manipuler des objects JSON. Vous pouvez le trouver ici .

Cette fonction simple fusionne récursivement les objects JSON, notez que cette fonction fusionne tous les JSON en premier param ( target ), si vous avez besoin d’un nouvel object, modifiez ce code.

 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 au lieu de la fonction isObject() peut être utilisée comme ceci:

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

mais ce n’est pas une bonne solution, car il faudra beaucoup de ressources si nous avons des objects JSON volumineux.