如何在JavaScript中join两个json对象,而不使用JQUERY

我有两个json对象obj1和obj2,我想合并它们并克里特一个单一的json对象。 得到的json应该包含obj2中的所有值和obj2中不存在的obj1中的值。

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

有几个不同的解决scheme来实现这一点:

1 – 原生javascript for-in循环

 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()
(浏览器兼容性:Chrome:45,Firefox(Gecko):34,Internet Explorer:不支持,Edge:(Yes),Opera:32,Safari:9)

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

4 – 解构作业
实现这一目标的新可能的解决scheme是使用解构分配 ,这是部分标准化的:

解构赋值语法是一个JavaScriptexpression式,可以将数组或对象中的数据提取到不同的variables中。

使用这个新的语法,你可以像这样将不同的对象合并/合并成一个对象:

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

5 – extend jQuerylodashfunction

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

6 – lodash的mergefunction

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

更新1:

请记住,在原生JavaScript中使用for in循环,需要根据基本JavaScript对象和全局数据types中可能的原型更改来了解自己的环境。 例如,如果你正在使用一个js库添加新的东西到Array.prototypeObject.prototype

但是如果你愿意防止这些可能的添加东西污染你的对象for in循环中,你可以这样做:

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

更新2:

我已经更新了我的答案,并添加了解决scheme编号4,这是一个新的JavaScriptfunction,但尚未完全标准化。 我正在和Babeljs一起使用它,它是编写下一代JavaScript的编译器。

工作的快乐

最简单的方法与jquery –

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

没有Jquery –

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

另一个使用underscore.js的解决scheme是:

 _.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]); 

要么

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

3)最简单的方法:

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

我已经使用这个函数合并了过去的对象,我使用它来添加或更新obj1上的现有属性与来自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]; } } } 

它将处理多层次的层次以及单层次的对象。 我将其用作操作JSON对象的实用程序库的一部分。 你可以在这里find它。

这个简单的函数recursion合并JSON对象,请注意,这个函数将所有的JSON合并到第一个参数( target )中,如果你需要新的对象修改这个代码的话。

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

顺便说一句,而不是isObject()函数可能会使用像这样的条件:

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

但这不是一个好的解决scheme,因为如果我们有大型的JSON对象,将会花费大量的资源。